CSS：100％宽度和背景？

Question

我的页面有2-3个100%宽度和背景的部分。当我打开它时，全屏都很好，但是当屏幕小于960像素（此部分内容的宽度）时，背景图像不是整个页面。右侧一开始隐藏没有背景- 是白色的。您可以在这里看到我的意思：http://micobg.net/10th/

- micobg

---

阅读此内容：http://www.whatstyle.net/articles/48/css_tricks_1_100_percent_width_in_a_variable_width_container - xkeshav

你可以在stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling找到有用的信息。 - utsikko

Answer 1

只需将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>

- Jay

Answer 2

关于这篇文章，你应该也要使用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;
}

- Mazdak Shojaie

Answer 3

请使用背景图的最小宽度min-width:960px;代替宽度width:100%; 祝好！

- Simon Dragsbæk