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

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

希望它能帮助。