Add Full Size Background Image to Internet Explorer 8, and IE7
Since you can't easily place the background in your site using the usual methods, can you place an image within your code? If so, this solution might work. I used it to simulate a full-screen background for IE8 and IE7, and it works well.
Place the image right after the body tag in the html code. (You can probably place it elsewhere depending on your site structure, but you may have to add a z-index.) Next, the background in this example is wrapped in an IE Conditional Comment so only IE8 and below will see it. (Note: It's buggy in IE6, but you might be able to get it to work? If not, just adjust the Conditional Comment to include IE7 and IE8 only).
HTML Code
<!DOCTYPE html>
<head></head>
<body>
<!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->
CSS
.ie87-bg {
display:block;
position:fixed;
top:0;
left:0;
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
margin:0;
padding:0;
}
You probably already know this, but here are 3 ways to target older versions of IE:
- JavaScript browser feature detection - mattstow.com/layout-engine.html
- Css Hacks - BrowserHacks.com
- IE Condtional Comments http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Helpful Tips: background-image:none; overwrites background-size: cover. The _ hack is one way to turn off the custom IE background in IE6 .ie87-bg {_display: none;}.
position:fixed; is buggy in mobile/touch screens. The default position:scroll; works well on touch. The background idea is from this tutorial - http://css-tricks.com/perfect-full-page-background-image/
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
