响应式图像背景

Question

我有一张图片作为我的背景，但我不知道如何使我的代码具有响应性，以便在我缩小浏览器窗口时图像保持一致。这是我的代码：

body {
margin-top: 50px; 
}


.full {
background: url(../melissa.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

Answer 1

如果您想要响应式background，请查看此SAMPLE

.full {
    height: 500px;
    background-image: url('image.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 2

这将使它对您做出响应。 只需将高度和宽度添加到 100%。

.full {
position: relative;
width: 100%;
height: 100%;
background: url(../melissa.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Answer 3

实际上，我假设 .full 是一个包含您想要的背景的 div 对吧？如果是这种情况，设置为 100% 的宽度和高度只会使 div 变大，这可能仍然无法正常工作，因为他使用 100% 的高度，因此您需要将 100% 设置为 body 或任何其他容器.full 就在其中。您可以设置背景大小：封面、背景位置：中心中心、背景重复：norepeat，然后只给 .full 它的高度和宽度。这应该使背景总是填满整个容器。