I have this code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Background to fit screen</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Imagetoolbar" content="no"> <style type="text/css"> /* pushes the page to the full capacity of the viewing area */ html {height:100%;} body {height:100%; margin:0; padding:0;} /* prepares the background image to full capacity of the viewing area */ #bg {position:fixed; top:0; left:0; width:100%; height:100%;} /* places the content ontop of the background image */ #content {position:relative; z-index:1;} </style> <!--[if IE 6]> <style type="text/css"> /* some css fixes for IE browsers */ html {overflow-y:hidden;} body {overflow-y:auto;} #bg {position:absolute; z-index:-1;} #content {position:static;} </style> <![endif]--> </head> <body> <div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div> <div id="content"><p>Enter a ton of text or whatever here.</p></div> </body> </html> Code (markup): it is working in FF and IE7, but not in IE6. How can I fix this problem?
Position:fixed is generally made of /FAIL/ cross browser - especially since IE6/earlier HAS no position:fixed. The 'trick' to doing what you are trying to do is to set html and body to 100% height AND overflow:hidden. (the overflow stops legacy IE from showing TWO scrollbars) - you then ABSOLUTE position your background IMG tag (not the div around it - which I'd leave in just as lip service to the validator), then absolute position your content div over the IMG tag ALSO set to full size, but with overflow:auto on it. Try this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Imagetoolbar" content="no" /> <title> Fixed full size background test </title> <style type="text/css"><!-- /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,legend, h1,h2,h3,h4,h5,h6, hr,ul,li,menu,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } html,body { height:100%; overflow:hidden; } #fixedBackground, #container { position:absolute; top:0; left:0; width:100%; height:100%; } #content { overflow:auto; } --></style> </head><body> <!-- below div is lip service to make it validate --> <div> <img src="yourimage.jpg" alt="" id="fixedBackground" /> </div> <div id="container"> <h1>Fixed Background test</h1> <p>Enter a ton of text or whatever here.</p> <p>Enter a ton of text or whatever here.</p> <p>Enter a ton of text or whatever here.</p> <p>Enter a ton of text or whatever here.</p> <p>Enter a ton of text or whatever here.</p> <p>Enter a ton of text or whatever here.</p> <p>Enter a ton of text or whatever here.</p> <!-- #container --></div> </body></html> Code (markup): Should work all the way back to IE 5.0 Oh, and Steelfrog - as to the why, you cannot RESIZE a background. This technique makes the image stretch to the full visible browser window - which can be a handy effect from time to time.