divs as web backgrounds

[CodilX]

Hi there,

I'm working on my site and I've hit a bump.

I'm running on a widescreen resolution of 1280x800 and I completely forgot about the other people who have 4:3 monitors and lower resolutions.

My website's content area is about ~900px wide. I've added smoke/fog/light effects outside the 900px div, both left and right, each about ~150px, thus making my website around ~1200px wide.

The issue is, that when viewing the website on a smaller resolution, I get the side scroll bar popping up, and it ruins the entire look and feel of the site.

My question is, how do I make those side divs not interfere to the overall width of the site, and if the viewers resolution is lower than 1200 in width, that those divs would just display as wide as they can?

Thanks!

[bcolflesh]

[google.com...]

[CodilX]

thanks, but I can't quite get this to work.. maybe you could help me out?

#container
{
height: 1000px;
width: 876px;
left: 50%;
margin-left: -438px;
position: relative;
}

#left_bg
{
height: 414px;
width: 165px;
position: absolute;
background: url('images/left_bg.jpg');
left: -165px;
top: 0px;
}

#right_bg
{
height: 414px;
width: 165px;
position: absolute;
background: url('images/right_bg.jpg');
left: 876px;
top: 0px;
}

<div id="container">
<div id="left_bg"></div>
<div id="right_bg"></div>
</div>

[edited by: CodilX at 9:34 pm (utc) on July 16, 2008]