CSS：100% 宽度和背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12085881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: 100% width and background?
提问by micobg
In my page have 2-3 sections that have 100% width and background. When I open it on full screen everything is ok but when the screen is smaller than 960px (width of content in this sections) background image is not the entire page. The right side whis is hidden in firtst moment haven't background - it's white. You can see what I mean here: http://micobg.net/10th/
在我的页面中有 2-3 个具有 100% 宽度和背景的部分。当我在全屏模式下打开它时一切正常，但是当屏幕小于 960 像素（本节内容的宽度）时，背景图像不是整个页面。右侧隐藏在第一时间没有背景 - 它是白色的。你可以在这里看到我的意思：http: //micobg.net/10th/
回答by Jay
Simply add the background-size:100%style to the element where you applied background-image. Works in Firefox, Safari, and Opera. For example:
只需将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>
回答by Mazdak Shojaie
回答by Simon Dragsb?k
Use background min-width:960px; instead of width:100%; Cheers
使用背景 min-width:960px; 而不是宽度：100%；干杯
