Background image appearing the way I want.

Footer background image issue

[tomah]

I'm not an expert with CSS/HTML but usually with trial and error, I figure out how to do what I want, but I'm really stumped this time.

I'm trying to use two background images for a site, one in the header and one in the footer. Part of the image streams outside the body area, both to the left and right.

Now, it's working properly in the header image, but the footer image is being cut off at the body size (which is 950px).

Now my coding is probably quite crude, and there may be a few lines of code which shouldn't be there because I'm using an old design as a base.

Here's the relevant code for the header image which is working properly:

body {
width: 950px;
background: #fff url(images/dietrifficbg.jpg) top center no-repeat;
color: #333333;
font-size: 12px;
font-family: Verdana, Helvetica;
margin: 0px auto 0px;
padding: 0px;
border-left: 0px solid #333333;
border-right: 0px solid #333333;
}

Here's the relevant code for the footer image which is not working the way I want:

#footer {
 height: 300px;
 width: 950px;
 background: #fff url(images/dietrifficft.jpg) top center no-repeat;
color: #999;
 font-size: 11px;
 padding: 30px 0px 0px 0px;
margin: 0px auto 0px;
text-align: left;
line-height: 17px;
}

Help will be greatly appreciated.

[Marshall]

Try reducing your footer width by 30px. When calculating sizes, you have to include margin, border and padding into the overall dimension.

Marshall

[tomah]

Nah, that doesn't work my friend.

I know you're not allowed to post url's, but can you post images? I think it might be easier to understand if you could actually see the image.

[Marshall]

tomah,

Nope - no images. Sticky Mail me the url.

Marshall