HTML Content pushed down below a fixed background image
Question
My page starts (first thing after the <body> tag) with this:
<div id="wallpaper" style="width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1;">
<img src="images/black-matte-1650-Lit-Etched.jpg" style="width: 100%; height: 100%;" alt="">
</div>
This works fine on every browser except IE when it is in Compatibility View mode. Even most IE version display this correctly, but only if not in Compatibility View mode.
The content is supposed to "hover" over the background image so that as the page scrolls, the content scrolls, but the background remains stationary. Instead, the rest of the page's contents are pushed down to the bottom of the background image, and they render from there. So, my page appears to be nothing but it's background image, and you have to scroll down to see the page content below it.
Can anyone explain what is wrong, and how to fix this?
1 answers
solution1
2 ACCPTED 2015-03-25 20:14:17
If you just want a fixed background image, I would not use a div. Try this instead...
CSS:
body{
background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed;
}
Then remove your wallpaper div and image from the HTML.
Edit: You could also apply that CSS to your div if that div needs a different background than the rest of the page:
div#wallpaper{
background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.