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.
Code: Select all
<html>
<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>
</html>