I’d like a background image to repeat across the whole screen for a few sections of my site. I’d like the content to have a fixed width though. Normally I would have a nice wrapper class around the whole site, like this:
But normally the .wrapper would have a width of – say – 960px, which means my background images for the header, content and footer won’t stretch the whole screen. This leads me to the rather messy markup:
Content .. content?!
now the background images of header, .content and footer will stretch 100% of the whole page. The content of each part can be 960px.
Now my question:
Is there any neater way of doing this so I can keep my markup like I wrote first?!
Yeah, that would be fine if I just wanted to have one background image, but I’d like to have a background image for the header, a different one for the .content, and a different one for the footer! Dynamic sizes etc.
I think this is a clasic layout, as seen on many pages. If your content is centered on the page (wrapper) and you just want to extend the header to the left and to the right, just add a giant neagtive margin to both sides and the same amount as a positive padding.
margin: 0 -9999px;
padding: 0 9999px;
I’m not sure if this is the “best” way of doing it, but it always did the trick for me.