Good day folks. Well the heading kind of summarizes the problem. Im trying to design one of those pages where the background image is fixed in place, and only the content that appears over the background can be scrolled up on down. The screenshot below should give you the idea.
Well to achieve this, I set the background with a z-index of -1, and give it a fixed position as seen in the css below. The background image is given a fixed height in pixels, and a width of 100% ( if I specify a fixed width in pixels, there will be an extra white space to the right of the background image with a scroll bar which increases the effective width of the screen). Well when the background image is given a 100% width, it fills the extra white space but the scroll bar is still present and the width of the page is still larger than the browser width. To fix this I give the body element ( parent to both the background and the foreground elements)an overflow-x value of hidden which gets rid of the problem. Everything looks like I want it to except that a new problem arises. When I resize the browser window (make it smaller), the scroll bars don’t appear either and so, I can’t move the page contents around from left to right. I need to always have it maximized to show all the contents. Who can suggest any tweaks or tricks to get the page looking like I want it to (ie have the background to assume a width that is no greater than the monitor width with no scroll bars when maximized)?
Here is a simplified version of the html and css, showing the elements involved.
[php]
<head>
<title>Club Scene</title>
<style>
#background {z-index:-1;height:1024px;width:100%;margin:auto;
position:fixed;left:0px;bottom:0px; background-image:url('images/club_wallpaper.jpg');
background-repeat:no-repeat;}
#foreground{height:1590px; width:1000px;margin:auto; }
</style>
</head>
<body style = "overflow-x:hidden;">
<div id = "background"> </div>
<div id = "foreground"> a whole lotta content </div>
</body>
[/php]