CSS：100% 宽度和背景？答案

【问题标题】：CSS: 100% width and background?CSS：100% 宽度和背景？
【发布时间】：2012-08-18 15:06:41
【问题描述】：

在我的页面中有 2-3 个部分具有 100% 的宽度和背景。当我全屏打开它时，一切正常，但是当屏幕小于 960 像素（本节内容的宽度）时，背景图像不是整个页面。右边的 whis 隐藏在第一刻没有背景 - 它是白色的。你可以在这里看到我的意思：http://micobg.net/10th/

【问题讨论】：

阅读：whatstyle.net/articles/48/…
你可以在stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling找到有用的信息

标签： css background width

【解决方案1】：

关于this的文章，你也应该使用cover：

html { 
  background: url(PATH_TO_IMAGE) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【讨论】：

【解决方案2】：

使用背景最小宽度：960px；而不是宽度：100%；干杯

【讨论】：

【解决方案3】：

只需将background-size:100% 样式添加到您应用background-image 的元素。适用于 Firefox、Safari 和 Opera。例如：

<style>
.divWithBgImage {
  width: 100%;
  height: 600px;
  background-image: url(image.jpg);
  background-repeat: no-repeat;
  background-size: 100%; //propotional resize
/*
  background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
  some contents
</div>

【讨论】：