You need to add a background style rule to the body selector in your CSS, preferably in a child theme. Something like:
body {
background: url("/path/to/tileable-image.jpg") repeat scroll 0 0 transparent;
}
Cheers
PAE
Thanks for the help! I just did the edit and it puts the background image in the footer and behind the entire content area. I want the footer to stay the color it is now and the background image to appear on both sides of the page and fill in around the header.
Also, my header image is a little off center…can you help me center it?
I just looked at your site and I can’t see any background image at all. Nor can I see the style rule I suggested.
And in fact the html seems to be very different from what I was looking at before (although I may be mistaken about that).
Unless I can see what’s going on, I can’t really help.
Cheers
PAE
I’m sorry, I’ve just put the background image back in. Again, my url is
http://honeyrosenk.com.previewdns.com/
and I want the content area (including navigation) to be white, while the background image fills in behind it. I want it to look something like this:
http://www.garypeppervintage.com/
I’m going to try the above changes again and see if it works. Thanks for your help.
I’ve just done the change you suggested and it placed the image into the footer area, but I want the content area to stay white.
Your #site div has a min width of 962px, but no other width, so it is expanding to 100% of its parent (body). If you want an background image on the body to show, you need to give your #site div a fixed width. The Gary Pepper one is 980px.
Cheers
PAE
Great. I’ve fixed the width and changed the size of my header, which has made everything look centered.
I just don’t quite understand how to have the background image fill in behind the header image as well. I want the content are to stay white, including the navigation, but the rest of the page to be covered with the background image. Is there a way to do that?
This is the code I have in the dynamic.css folder in line 72:
body #page, .commentlist ul.children .even, .alt #commentform textarea{background-color:#ffffff; width:980px; margin-left: auto; margin-right: auto;}
And in the style.css file in line 118, I have this:
body {
background: url(http://honeyrosenk.com.previewdns.com/wp-content/uploads/2011/08/grey_vintage_wallpaper_1.jpg) repeat scroll 0 0 transparent;
again my site url is http://honeyrosenk.com.previewdns.com/. I don’t know what you can see since it’s in preview mode, but if you could help in any way that would be great because I’ll be done with the site!
When I check your site the operative rule for the background is this one on line 71 of your style sheet:
body, body.fixed_width {
background-color: #A2DFE0;
}
So I just see a light blue background and no background image. From what I can tell, the background image specified on line 118 is not loading, but this may be due to the fact that I’m on a very slow wireless connection from a hotel room at the moment.
However, if you specify a background image for the body, and specify to tile along both the x and the y axis, it should show up behind everything (because the body is behind everything).
In other words, your rule on line 118 should apply. If it’s not, I’m afraid I can’t say why, because I can’t see it.
You could, perhaps, try deleting the rule on line 71, to see what happens, but for me that just turned everything white because the image wasn’t loading.
Cheers
PAE
OK, thanks. I’ll try it. For me, the background image is now filling in where I want it to and the content area is staying white. My last problem is that the column width on the right side of the page is set wide so that you can scroll right even though there’s no content over there. Any idea on how I can adjust it?
