Span background image full width of site help

[tribethrow]

Hey all,

This is probably a pretty basic fix but here's what I want to do.

I'm trying to get a background on dynamic content (bg should only be behind said content).

So I'm just testing somethings out but I'd like to have the background image span the entire width of the site, but have the content centered (margin: 0 auto 0 auto) in a div on top.

Anyway to do this without absolute positioning? I want to have 3 or 4 situations like this (with different bg imgs) and I'm not too sure of using absolute positioning so I'd either like to avoid it, or learn it simply haha.

Here's what I have.

<div id="bluecontainer">
<div id="blue">
<jdoc:include type="component" />
</div>
</div>

CSS:

#bluecontainer {
background-image: url(../images/bluebg.png);
z-index: -2;
}

#blue {
padding: 0 50px 0 50px;
width: 980px;
margin: 0 auto 0 auto;
}

Thanks for any help!!

Alex

[Wickham]

You can't make a background-image stretch to any window resolution so you have to use a normal image. You can do this by using position: absolute or position: fixed and make sure it is behind other content by using z-index: -1;

Here's an example using position: fixed;
http://www.wickham43.net/backgroundfullwidthflexible.html