Question

在所有浏览器中，我使用以下css规则，它可以正常工作

// it fits the background image to container
background-size: contain;
background-size: cover;

是否有css规则使其在IE8中工作，或者我应该使用javascript？

如果是javascript，我使用的是jquery 实现目标的最佳方式是什么？

Answer 1

我也有同样的问题，但通过以下链接我的问题解决了

http://css-tricks.com/perfect-full-page-background-image/

Answer 2

有一个jQuery plugin或此javascript fallback带过滤器

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

检查same page for more跨浏览器方法

Answer 3

你可以这样做：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
  <img src="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg" class="bgimg" />
  <div class="frame">
    <div class="contents">
    page contents
    page contents
    page contents
    page contents
    page contents
    </div>
  </div>
</body>
</html>

的CSS：

html {
 background:#000; 
}

html, body { 
  padding:0;
  margin:0;
  overflow:hidden;
  height:100%;
}

.bgimg {
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;
}

.frame {
  color:white;
  width:100%;
  height:100%;
  overflow:auto;
}

.contents {
 padding:10px; 
}

演示网站：http://jsbin.com/enevov/1/edit

你可以通过改变来达到不同的效果宽度：100％; 高度：100％; 在.bgimg上，根据你是否想要一个失真来完成不同的效果，例如width: 100%只会让它触及顶部等...

希望这有助于确认

Answer 4

这适用于在IE8中在完整窗口上拉伸图像

http://css-tricks.com/perfect-full-page-background-image/

修复IE8中的背景图像

4 个答案: