Question

背景图像宽度为1579px，因此如果我们将浏览器拉伸到1920px，则背景图像高度会发生变化，即使我已经给出了固定的div宽度（650px）。那么如何在所有页面宽度上保持背景高度相同？

CSS：

.blue_bg1{    
    background: url("../images/hero-bg-espresso.jpg") no-repeat;
    height: 650px;
    background-position: center center;
    background-size: 100% auto;
    width: 100%;
}

Answer 1

使用cover属性。像这样：

.blue_bg1 {
 background-size: cover;
}

Answer 2

在px声明中使用background-size单位：

.blue_bg1{    
    background: url("../images/hero-bg-espresso.jpg") no-repeat;
    height: 650px;
    background-position: center center;
    background-size: 1579px auto;
    width: 100%;
}

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

尝试在后台声明中添加一些属性怎么样？试试这个，如果有帮助，请给我回复：

background: #0000FF url("../images/hero-bg-espresso.jpg") no-repeat fixed center;

这是一个简写属性，在一个声明中设置ll背景属性。

另见：

http://www.w3schools.com/cssref/css3_pr_background.asp

希望它有所帮助。

如何在所有页面宽度保持背景图像高度相同？

3 个答案: