如何在所有页面宽度上保持背景图像高度相同?
问题描述:
背景图像宽度为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%;
}
答
使用cover
财产。像这样:
.blue_bg1 {
background-size: cover;
}
+0
它会将背景图像高度改变为超出默认宽度 – Rijo 2014-12-05 18:03:15
答
使用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%;
}
答
什么尝试添加背景声明某些属性?如果它可以帮助你 试试这个,还给我:
background: #0000FF url("../images/hero-bg-espresso.jpg") no-repeat fixed center;
这是一个速记属性设置在一个声明中LL背景属性。
参见:
http://www.w3schools.com/cssref/css3_pr_background.asp
希望它能帮助。
只需设置一个固定的/ 100%的高度:) – 2014-12-05 18:04:54