Infinite width repeat x

[sheepysheep60]

Hello.

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:

Header content


Content... content?!


Footer content

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:

Header content






Content .. content?!






Footer 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?!

Thanks guys! Dave.

[TheDoc]

Does your body currently have a background attached to it? If not, put it on there.

[sheepysheep60]

Hiya, thanks for the reply –

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.

[TheDoc]

Ah yes, sorry – didn’t read it close enough! In that case you’ll have to get a little messy with the code and give a wrapper to each section to create the 100% width.

[lajin]

You can use background properties of body and html tags to get the backgrounds (top and bottom aligned). Not sure if it is going to work for you.

[Qbit]

Hi,

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.

body {

overfow-x: hidden;

}



header {

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.

Greetz.

[Qbit]

Yes, I thougt I’ve seen it here but I couldn’t find it. Chris likes to do things with :before and :after nowadays. :) Maybe I should adopt some of his techniques.

But beware the browser support!

[bluce]

,

html 5 tags currently are not supported in all browsers, so you might just want to stick with the classice div id’s (ex:

).

If you go with your original markup. Just go with in your CSS and mark it up simply:

header, footer, #content {background:#(color of choice) or (background image of choice, and just repeat it to your choice repeat-x or repeat-y); width:100%;}

.wrapper {width:960px;}

Very simple CSS and you can go with your original html markup. Hope this works out for you.

[Author]

Posts