Welcome to WebmasterWorld Guest from 54.147.189.54

Forum Moderators: not2easy

Message Too Old, No Replies

divs as web backgrounds

     
8:49 pm on Jul 16, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:June 10, 2007
posts: 104
votes: 0


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!

8:53 pm on July 16, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2003
posts: 2355
votes: 0


[google.com...]
9:18 pm on July 16, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:June 10, 2007
posts:104
votes: 0


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]