Adding a Background Image to Your Joomla Articles
Here's how you can achieve this
In this tutorial we are going to show you how to add a background image to an article on your website with some CSS code. The code is inserted into your article itself. You can use the sample code provided to apply this CSS background individually to articles that you choose so we are not going to insert any code into our template to apply it universally to all articles. This will give you more freedom of choice by easily applying different backgrounds and styles to articles that you choose.
You may have to insert the sample code into your content without using your WYSIWYG Editor, becasue some configurations of WYSIWYG will strip out or alter your code so you do not get the desired result ( They are evil little things at times )
If you look at the bootom of this page, you will see an example of how this same code is applied to a custom Html module to manipulate the background.
Here is the code that was used in this article, Replace all the plus signs " + " with " < " or " > " as required. In this tutorial we are going to show you how to add a background image to an article on your website with some CSS code. The code is inserted into your article itself. You can use the sample code provided to apply this CSS background individually to articles that you choose so we are not going to insert any code into our template to apply it universally to all articles. This will give you more freedom of choice by easily applying different backgrounds and styles to articles that you choose. +/div+ +/div+
+div class="floatbox" style="background: transparent url(FULL PATH TO IMAGE.png) repeat scroll 0% 0%; width: 700px; height: 497px;">
+div align="left">+/div+
+div style="margin: 0px;">
+div align="left">+/div+
Here's how you can achieve this
Subscribe to this comment's feed
Mike Cross
said:
 |
no good The only way it works is with the over and over again look. But I did find a FREE software that almost did the transparent thing. I am using a MAC, is there any FREE software to make my pic look like the example pic? |
mustaq
said:
 |
... Use this code to prevent the repeating of the background image; open)div style="background: transparent url(images/Bands/prophecy.jpg) none repeat scroll 0% 0%; width: 700px; height: 497px;"(close) (open)div style="background: transparent url(images/Bands/prophecy.jpg) none repeat scroll 0% 0%; width: 700px; height: 497px;"(close)... |
Mike Cross
said:
|
(open)div style="background: transparent url(images/Bands/prophecy.jpg) repeat scroll 0% 0%; width: 700px; height: 497px;"(close) (open)div style="background: transparent url(images/Bands/prophecy.jpg) repeat scroll 0% 0%; width: 700px; height: 497px;"(close)... you know with the greater than and less than signs. They will not show up when I past the code. |
Mike Cross
said:
|
my code So I need to make the pictures transparent myself? This is the page I am working on: http://turnmusicn2money.com/in...&Itemid=29 |
mustaq
said:
|
... Hi Mike I am not clear on how to make the background images transparent. The images you see here looks transparent because it was edited with an images Editor, like Fireworks or Photoshop. It is not the script responsible for that. You need to drop the transparency levels on your image. the picture is showing up, but it's over and over again You need to define a width and height for the image, or else it will repeat. What does your code look like ? style="background: transparent url(FULL PATH TO IMAGE.png) repeat scroll 0% 0%; |
Mike Cross
said:
|
why background images are not Transparent???? It's has been all day. And I am not clear on how to make the background images transparent. the picture is showing up, but it's over and over again and it's not transparent. I don't mind the over and over again pictures, but I have to have the back ground transparent. Can't read the front ground wording. Can someone please help? |
mustaq
said:
 |
Image Yes, I can but its a very low res image that I found on the net. If you really need it , I can dig it up again.  |
cicalone
said:
 |
Thanks Excellent job. Very useful for me! Can you share the hearts image you put in your example? |
malek
said:
 |
Please example with pattern Hi Where is the example with patterns(repeat) that you once had here? it was nice and exactly what I need - please repost it. No, its easier to look at the code from your example than mutating the above for a newbe. thx mate |
mustaq
said:
|
Fixed background with Scroll Hi Yes, this can be easily done as well, I will post another tutorial with some sample code for you soon, I just need to clear my desk first.  |
Ivan888
said:
 |
... Thanks, this worked really fine...but is there a way to make the background fixed? Like a fixed background and scrolling text only. Thnx |
mustaq
said:
|
Thanks Thanks for the appreciation, we will be looking at a more comprehensive tutorial shortly, with more relevant examples and applications |
mind power
said:
 |
... I would like to appreciate the efforts you have made in writing this article and i am hoping the same good work from you in the future as well. |
mustaq
said:
|
Yes, You can This is possible. You will need to add the relevant code to your temlates CSS, thereby creating sort of module styling that can be applied in the modules parameter setting for modules or in the article itself via the WYSIWYG. |
AlexEnergy
said:
 |
How to convert an UPLOAD IMAGE to background-image I wonder if there is a possibility to use a class or style to transform a normal to image to background-image. My purpose is to make it easy for my users to upload images for background-image without knowledge of html. My user press the button of image in editor, he uploads the image and then I have to tell him an easy way to transform the image to background-image. |
mustaq
said:
|
...thanks for sharing. bookmarked You are welcome. We will be putting up a few more examples , to show some of the more creative applications of this tutorial, once we are done with the site redesign and layout. |
mustaq
said:
|
Version What version of IE are you seeing this with ? I don't see any difference with IE 7 or IE8. I may be overlooking something. Can you describe it more ? or post a screenshot on the forums ? |
Avo
said:
 |
IE/Firefox Thanks a lot, this is really useful! There is a slight difference in visualisation between IE and firefox (not so bad). In IE the text is moved a bit. Any ideas how to resolve this issue? |
herdboy
said:
 |
Lets See Are you using any type of SEF/ SEO extension or plugin on your site ? Have you tried both absolute and relative URL's to link the image ? This could be the most likely cause of your issue. Can you post a link to your site ? |
Mo Kelly
said:
 |
Works in editor not on site I can get the background picture in the editor when I do this but nothing shows for the background on the site when the article is displayed on the front page. |
mustaq
said:
|
Yes You Can Yes this is also possible. See the example at the bottom of this page  . This will allow you to style the content of custom modules even further. If your template has different module stylings you can still use this and apply a background image to suit it. |
gery
said:
 |
will this work for a custom module? will this work for a custom module? this will be great if it works inside a custom joomla module, just imagine the posibilities wit this! |
Show/hide comment form