View Full Version : Easy Background Image Fix??

07-20-2008, 07:31 PM

I am using the Revolution Blog theme (style sheet (http://jeremycaverly.com/style.txt)) for WordPress and attempting to get my border areas to look like this:

I've gone in and uploaded the new image (http://jeremycaverly.com/bg.gif) to the images folder within the theme as bg.gif.

Unfortunately, my styling still just looks like this:

I'm guessing this is a SUPER simple fix and was hoping you could either offer assistance or shoot me a link to a resource that would explain it.

07-20-2008, 09:16 PM
Hi there,

Really cant solve this without a link to your site (tried going to jeremycalvery.com and got a coming soon message) or all of your code (would prefer a link).

Best Regards,


07-20-2008, 09:22 PM
Looks like the path to your background image is wrong. In the stylesheet, you have the path as 'images/bg.gif' but in your description it's just 'bg.gif'.

Try either removing 'images' from the path, or placing the image in the 'images' folder.

07-20-2008, 10:52 PM
OK, I can't give a link to the actual site because it isn't announced yet and is for a client.

What other code would you need besides the main Style Sheet? It is a WordPress installation with the free "Revolution Blog" theme.

I can post further code if you give me some guidance as to what else you need to see.

As far as the directory, I have the image in the correct directory on the other server that I am using. I only put it in the root of my personal site to show it to you guys so you could see what the full image looks like.

The back end is accessing the bg.gif file correctly because if I go to the site and right click > View Background Image, it shows the full length image. It's like it's there but it's being hidden behind the white of the side bar columns.

07-20-2008, 11:16 PM
Ok, well, without seeing the site it is hard for me to fix problems, but try a z-index on the body to see if it brings it up:

body {
/*your styles*/


07-20-2008, 11:33 PM
That doesn't seem to fix anything.

Here is a live demo of the exact same theme I am running


In FF if I right-click > View Background Image in the upper left corner, I see this raw image


I want this image (http://jeremycaverly.com/bg.gif) to run right down the side so it looks like this:


And I'd like to know how to do different images for the right and left "borders"

Thank you for all your attention!

07-21-2008, 01:33 AM
I think the '#wrap' div is causing the problem. Or this bit of code at the top of your stylesheet:

#wrap {
background: #FFFFFF;
margin: 0px auto 0px;
padding: 0px;

Remove the 'background: #FFFFFF;' line and see if that helps. This will probably cause all the content to lose its white background, but it should fix this problem.

07-21-2008, 01:47 AM
That worked ... but you're right, now ALL of my content modules are transparent. Any idea how I can fix it so all of my content still has the white background?

Thank you for joining in on the fun!

07-21-2008, 01:56 AM
I believe you can apply the background: #ffffff; to the '#content' div, but you'll need to apply a 'clearfix' to the div. Something like this should work:

#content {
width: 960px;
margin: 0px auto 0px;
padding: 20px 0px 0px 0px;
background: #ffffff;
overflow: hidden; /* clearfix - makes content div wrap around three floated child divs */
_height: 1%; /* Make clearfix work in IE6 */

You can read more about this method of clearing floats (http://www.stuffandnonsense.co.uk/archives/clearing_floats_without_structural_markup_in_ie7.html) if you want.

07-21-2008, 01:58 AM
That looks like it fixed it!! Thank you thank you!