Forum Moderators: not2easy
What I would like to do is set both a top and bottom fix background image to my browser screen. So say...grass that stays at the bottom, but sky and a sun image that remains at the top. Is this possible?
Again, I've not tried it, but that's how I'd start.
If it doesn't work with html and body, try adding a wrapper.
FWIW:
CSS3 will allow multiple background images per element
[w3.org...]
But browsers should not support that just yet.
Thanks for the replies. If I were to use a nested div or wrapper, how would I ensure this would span to 100% of the screen height? Different resolutions would require heights, right?
height: 100%;height: autoheight: 100%[edited by: swa66 at 11:30 pm (utc) on Dec. 22, 2008]
Any ideas?
height:100% was set to the body tag but that didn't work.
Do the same as you did, but set what you set on the html on the body and what you had on the body on a wrapper.
Keep the height:100% on the html.
It's not uncommon for IE6 to force you to add an otherwise unneeded wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
<!--
html body {
background: url(http://www.searchengineworld.com/gfx/logo.png) fixed;
background-position: bottom center;
background-repeat:repeat-x;
height:100%;
margin:0px;
}
html {
height:100%;
margin:0px;
}
#wrapper {
background-position: top center;
background: url(http://www.searchengineworld.com/gfx/logo.png) fixed;
background-repeat:repeat-x;
height:100%;
}
-->
</style>
</head>
<body ><div id='wrapper'><div style='background-color:tan;width:500px;height:2000px;background-position: top center;'>test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></div></div></body></html>
My first idea was to position:fixed the body, but that didn't have any desired effect in FF3 - need to one day dig in the idea of position:fixed on a body, might be just too weird a concept to start with.
But that scroll away from the background is only happening due to our limited height of the body.
so if we make sure the body simply doiesn't have a limited height and use the top image on the body, it'll work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background: url(1.jpg) fixed repeat-x top center;
min-height: 100%;
}
html {
height:100%;
background: green url(2.jpg) fixed repeat-x bottom center;
}
</style>
</head>
<body >
replace with really long text,
at least more than 2 times the height of your viewport.
</body>
</html>
Works in FF3, safari and opera.
Works in IE7.
IE6 ...
Well there are two problems:
It doesn't honor the min-height, and that's a problem when there is to little content in the body to stretch it larger than the image you're using.
Easy fix: use height:100% in a conditional comment (IE6 treats height:100% mostly as min-height)
The second one is harder: there is a known bug where fixed background-attachment positioned backgrounds do scroll in IE6. There are a few tricks discussed a.o. here: [webmasterworld.com...] but I'd rather not use something that will limit the use of positioning inside the body (causing more trouble down the road).
So I take a look at one of my favorite scripts: IE7.js . It does have a fix for fixed background attachments, but they don't appear work on the body ... sigh.
Nothing lost, the fix does work on other elements, resulting in something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background: url(1.jpg) fixed repeat-x top center;
min-height: 100%;
}
html {
height:100%;
background: green url(2.jpg) fixed repeat-x bottom center;
}
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<style type="text/css">
body {
height: 100%;
background:none;
}
#IE6 {
background: url(1.jpg) fixed repeat-x top center;
min-height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="IE6">
replace with really long text,
at least more than 2 times the height of your viewport.
</div>
</body>
</html>
Hope this inspires some to do even better.
Note that it you have 2 images, that in this case the top one will go over the bottom one if your images are taller than the available space.
