View Full Version : Auto-Resizing 'Background'

12-27-2006, 03:01 AM
I'm trying to achieve a 'background' that will automatically resize itself based on the user's resolution, or browser window size. The method I'm currently using just makes an image behind the actual content and resizes it to 100%. It looks fine in Mozilla Firefox, but everything is shoved to the right in IE7. I haven't had the opportunity to test it in IE6.

Here's the CSS used:

#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;

#contents {
z-index: 1;
position: absolute;

And corresponding HTML:

<div id="bg_image">
<img src="http://www.technologisticsforums.com/style_images/vista/bgs/Aurora.jpg" style="width: 100%; height: 100%;">

<div id="contents">
{ Stuff }

I'm currently using it even though it screws up in IE7. Here's a live example: http://www.technologisticsforums.com/.

Any suggestions as to fixing the issue would be greatly appreciated.

12-27-2006, 06:37 AM
I have similar issues, and I cannot believe automatic background resizing isn't a standard feature.

Try resizing the image with javascript, as in

function windowWidthMinusScrollBar () {
if (typeof window.innerWidth != "undefined") return window.innerWidth
else if (document.documentElement && typeof document.documentElement.offsetWidth != "undefined" && document.documentElement.offsetWidth != 0) return document.documentElement.offsetWidth
else if (document.body && typeof document.body.offsetWidth != "undefined") return document.body.offsetWidth

BGImage.style.width = windowWidthMinusScrollBar+'px';Write a similar code for the window height. Let me know if this works out.

12-27-2006, 07:07 AM
Its supposed to be standard in CSS3 but that won't be out fully for a while. It can be done without javascript. Coolcamo you are on the right track. Here is an example that shows how it is done.

12-27-2006, 07:59 AM
Well, you can always just do

body {margin: 0}
inside the CSS. I had that same problem once, and that's how I fixed it. Also, I tried it with yours, and it worked.

12-27-2006, 06:16 PM
I took the example that Aerospace_Eng posted and changed some things around. I now have:

#background{position:top left absolute; z-index:1; width:100%; height:100%;}
#scroller {position:fixed; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:0px 0px 0px 0px;}

color: #222;
font-family: "Segoe UI", Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, Times New Roman, Serif;
font-size: 11px;
line-height: 100%;
margin: 0px;
padding: 0px; /* required for Opera to have 0 margin */
text-align: center; /* centers board in MSIE */


<img id="background" src="http://www.technologisticsforums.com/style_images/vista/bgs/Aurora.jpg" alt="" title="" />

<div id="scroller">
<div id="content">



In Firefox, everything is fine, except that the bottom isn't pushed up to show the entire image. In IE7, there are two scrollbars -- the outer scrolls the background and the inner scrolls the content. Maybe IE is supposed to perceive that there isn't anything else to show so it shouldn't be showing the outer scrollbar?

12-28-2006, 06:11 AM
Review the source of the example carefully. You are missing some stuff. Mainly the html, body instead of just body. In the example #scroller is position:absolute not position:fixed.