How to insert a picture as background

Permalink 1 user found helpful

I' searching a way to instert a picture in the background of my theme, instead of just a colour (i use the "Dark chocolate" theme). Could you please tell me if there is a simple way of doing this? Or could you redirect me to another theme where this would be possible?
Many thanks,


View Replies: View Best Answer
glockops replied on at Permalink Reply
This would probably be the easiest method to do this -
adajad replied on at Permalink Reply
...and this would be one (of many) cheaper methods:

But then it requires you to know some css, and if you don't then perhaps the time you need to spend on learning and implementing a css approach will cost you more than $15.

To learn your basic css, go to
nico741019 replied on at Permalink Reply
Hi, and thank you for your answers; i'm trying to follow this procedure, but not really successfull for the moment:

I'm not sure about the location of the file "header.php" that i have to edit. Since i use "dark choclate" theme, i took this one:
But the modification doesn't change anything to my site. I also deleted this file to check that it was the right one, but again, no change to my site. If you have a solution, please tell me...


adajad replied on at Permalink Reply
That is the header file used for your theme, and the reason you don't see any changes would be a caching issue. When you make changes in your code you should make a habit of clearing your site and browser cache.

To clear the site cache you go to 'Dashboard > System & Settings > Optimization > Clear Cache' or type 'Clear Cache' in the intelligent search box.

To clear your browser cache CTRL + F5 (at least for Chrome) a couple of times should do the trick.

Be sure you put the header.php file back because otherwise you will not be able to load anything with that theme.

If you want to try out a css approach you should edit main.css in the themes folder.

You should also read this how-to which goes through the editing of a core theme:
sabumnimdk replied on at Permalink Reply
Hi Nico

If you want the quick and dirty low down, do it this way.

In your chosen theme, find the CSS stylesheet file that takes care of setting the color of the <body>-tag.

This would most likely be in this file "main.css"

Open that file and find something like this rule:

body {background-color: #000; padding: 0px; margin: 0px; }

and replace it with something like this:

body {background: #000 url(images/YOUR-BACKGROUND.jpg) no-repeat 0 0; padding: 0px; margin: 0px; }

This is the easiest way to do it :0)

//Carsten - Denmark
nico741019 replied on at Permalink Reply
Thanks Carsten, it works, but i would like to stretch the picture to fit the screen; is there any html command that i could integrate in the main.css or header file?
I saw that there are Jquery plugins doing this, but i have no idea of how putting this in place.
Thanks again,

adajad replied on at Permalink Best Answer Reply
There are different css3 rules to try, but be aware they won't work in all browsers.

Try putting the background image in html tag instead of the body:

html{background: url(images/background.jpg) no-repeat top left fixed; background-size: cover;}

And again, see the link I posted before in this thread:
nico741019 replied on at Permalink Reply
Thank you Adajad, the background-size option works for me (Firefox), i'll test it with some other browsers.
Madebym replied on at Permalink Reply
If you want a solution that doesn't require Css3, so it can be displayed in older browsers, here it is.

Right after the opening body tag, insert this div.
<div id='bg'> <img src='your_picture.jpg' width='100%' height='100%'/> </div>

This image inside this div is your background picture, make sure it is around 1300x800px, and it will cover any resolution.

Then add this in the stylesheet for that div:
#bg{position:fixed; top:0px; left:0; width:100%; height:100%;z-index:-1;}

Now all you need to do is wrap the entire content of your page into one div, give it an id, and some styles.Let's say we call it mainPageWrapper. Then this is the css for it.
#mainPageWrapper{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index:0;}
harveyappleton replied on at Permalink Reply
Developed a simple addon to do this for you across whole site, and free! :) -