Hi, The design for the site I'm building has features both in the header region and footer region (see screenshots attached), bleeding out of the container area or 960px. Therefore I have had to cut out images for the top and the bottom of the background and attach them as background images to HTML elements. The header graphic was simple enough, I attached this to the body: Code: body { background: #94d3d0 url("../img/bg.png") top center no-repeat; font-family: Arial, Sans-serif, Helvetica; color: #ffffff; } The problem I am having is where to put the footer image, as all elements except for the <body> are contained within a container <div> which is 960px wide, but the image needs to bleed out of this region. I could just create another <div> between the <body> and the container with no width, but I'm reluctant to add a <div> solely for this purpose. The closest I have come to a solution is targeting the body:after CSS property and attaching the image to this. This works, although it pushes this footer image right down the page as it's technically adding itself after the body. If you look at the two attached images, the one with the pink mountain that runs across the entire bottom of the page is taken from the design and how it should be. The other one is currently attached as a background image to the container, with the background header image attached to the body. Like I say, I could use another <div> but I don't want to do that. I guess I could also remove the width on the container and add widths to elements withint it instead?
Can I ask why you don't want to add a new div? It seems to me that this would be, by far, the most effective way to fix your dilemma.
Think I know what you mean. That's done by adding a footer and two container classes. Don't be concerned about the extra divs, use as many as you need. <html> <head> <style type='text/css'> * { border: 0; margin: 0; padding: 0; } body { background: #ddd; } .container { background: #eee; height: 200px; margin: 0 auto; width: 900px; } #footer { background: #fff; } </style> </head> <body> <div class='container'></div> <div id='footer'> <div class='container'></div> </div> </body> </html> Code (markup):