如何让CSS背景图片随窗口大小和设备缩放

Question

我正在尝试设置一个可以用于响应式设计视口的流体模板。然而，现在当我尝试调整浏览器窗口大小时，它不会自动缩放，而在我的 iPhone 上，我只能看到标题图形的左上部分。我有一个主包装背景和一个标题动画 gif，它们都是1200像素宽。非常感谢任何帮助。

视口

<meta name="viewport" content="width=device-width, initial-scale=1">

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;

- Djacksway

---

你尝试过使用媒体查询为手机提供不同的图片吗？同一张图片不可能完美地适配于一个宽度为1400像素的笔记本电脑屏幕和一个320像素的iPhone屏幕。 - serraosays

Answer 1

尝试使用以下方式使用 background-size 属性：

background-size:100% auto;

如果您想将其高度覆盖整个页面高度，请使用以下内容：

background-size:auto 100%;

- Gaurav Kakkar

---

如此快速和简单的解决方案！谢谢，帮了我很多！ - Burkely91

Answer 2

background-size: cover;

对于我来说完全可行。

- Erez

Answer 3

background-image: url('');
background: no-repeat center center cover;

这通常运行良好。

- Sten Pelzer