如何在 BuddyPress 子主题的 IE 中拉伸背景图像

【问题标题】：how to stretch background image in IE in BuddyPress child theme如何在 BuddyPress 子主题的 IE 中拉伸背景图像
【发布时间】：2013-11-23 18:11:21
【问题描述】：

我正在基于 BuddyPress 默认主题构建自己的子主题。我需要有一个 100% 宽度/高度拉伸的背景图像。它在 Chrome 和 Firefox 中运行良好，但在最新版本的 IE 中，图像只是位于中心，其原始大小。不发生拉伸。这是我正在使用的 CSS，它只是父主题（BP 默认主题）的扩充：

body {
background-color: #000000;
background-image: url(images/DSC09005cc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #555;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 170%;
max-width: 1250px;
margin: 0 auto;
width: 95%;
}

提前谢谢你。迪玛

【问题讨论】：

标签： css image internet-explorer background buddypress

【解决方案1】：

IE9+ 支持 CSS3 background-size:cover 功能，但 IE8 及更低版本不支持。如果您尝试为 IE 8 及更低版本修复此问题，我可能会建议如下：

HTML：

<body>
     <img src="images/DSC09005cc.jpg" class="fit-background">
...

CSS：

img.fit-background {
     min-height: 100%;
     min-width: 1024px;
     width: 100%;
     height: auto;
     position: fixed;
     top: 0;
     left: 0;
}

@media screen and (max-width: 1024px) {
     img.fit-background {
          left: 50%;
          margin-left: -512px;
     }
}

...

如果您想在 IE 6、7 和 8 以外的浏览器中隐藏图像，您可以将图像放在 IE 条件语句中：

<body>
<!--[if lt IE 9]>
     <img src="images/DSC09005cc.jpg" class="fit-background">
<![endif]-->

...

如果您想了解更多关于它和其他几个选项的信息，这里是原始链接：http://css-tricks.com/perfect-full-page-background-image/

【讨论】：