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％到身体或任何其他容器那个.full就是。你可以设置背景大小：封面，背景位置：居中中心，背景重复：norepeat，然后只给它.full它的高度和宽度。这应该使背景总是填满整个容器。

响应的图像背景

3 个答案: