Html 如何使用窗口大小和设备缩放 css 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15588091/
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
How to have css background image scale with window size and device
提问by DHymansway
I am trying to setup a fluid template that I can use for responsive design viewports too. However now when I try to resize my browser window it does not scale and on my iphone i just see the top left part of my header graphic. I have a main wrapper background and a header animated gif that are both the same width of 1200px. Any help would be greatly appreciated.
我正在尝试设置一个流畅的模板，我也可以将其用于响应式设计视口。但是，现在当我尝试调整浏览器窗口的大小时，它不会缩放，而在我的 iphone 上，我只看到标题图形的左上角部分。我有一个主包装背景和一个标题动画 gif，它们的宽度都是 1200 像素。任何帮助将不胜感激。
viewport
视口
<meta name="viewport" content="width=device-width, initial-scale=1">
css
css
body {
background-color: #B28D66;
margin: 0 auto;
}
#Wrapper {
max-width:1200px;
width:95%;
background-image: url(../img/background_main.jpg);
background-repeat: no-repeat scroll;
background-position: center top;
height: 2200px;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Wrapper #Banner {
width: 100%;
height: 350px;
background-image: url(../img/animated-gif-header.gif);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Wrapper #Content {
width: 75%;
margin: 0 auto;
}
#Wrapper #MainNav {
background-image: url(../img/nav_bar.png);
width: 100%;
height: 75px;
margin-top: -20px;
}
#Wrapper #MainNav ul {
margin-right: 100px;
}
#Wrapper #MainNav ul li {
float: right;
margin-top: 15px;
padding-right: 21px;
回答by Gaurav Kakkar
try using the background-sizeproperty in the following manner:
尝试以下列方式使用background-size属性：
background-size:100% auto;
背景尺寸：100% 自动；
or use the below if you want to have its height covering the whole page height
或者如果你想让它的高度覆盖整个页面高度，请使用下面的
background-size:auto 100%;
背景尺寸：自动 100%；
回答by Erez Henya
background-size: cover;
works just fine for me.
对我来说很好用。
回答by Sten Pelzer
background-image: url('');
background: no-repeat center center cover;
This usually works fine.
这通常工作正常。
