CSS:100%宽度和背景?

时间:2012-08-23 06:25:39

标签: css background width

在我的页面中有2-3个部分,宽度和背景均为100%。当我在全屏幕上打开它时一切正常但是当屏幕小于960px(本节中的内容宽度)时,背景图像不是整个页面。右侧的底片隐藏在最短的时刻没有背景 - 它是白色的。你可以在这里看到我的意思:http://micobg.net/10th/

3 个答案:

答案 0 :(得分:22)

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

答案 1 :(得分:5)

关于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 :(得分:2)

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