css - 背景大小属性弄乱了我的标题

Question

我有一个 600px 高的标题，它使用背景图像作为背景。当屏幕超过1600px时，我使用cover，默认是contain。覆盖标题的是一张 500 像素高的图像（绝对定位）。

当我调整浏览器的大小时，标题不会保持其高度，这可以通过与标题重叠的覆盖图像很容易地看到。

这是代码：

/* ===== HEADER ==== */

header{
height: 600px;
min-height:600px;
width:100%;
min-width:100%;
background-image: url(../images/headerBG.jpg);
background-repeat: no-repeat;
background-size: contain;

}
#bgOverlay{
position: absolute;
top: 60px;
left: 30%;
}

/* ==== MEDIA QUERIES   ==== */
@media only screen and (min-width:1600px){
header{background-size: cover;}
}

以及查看它的链接：http: //www.madebym.net/test/crazysunsets/index.html

Answer 1

要解决我的问题，需要申请： background-size: 100% 600px;

这样，标题始终为 600 像素高，并且图像保持其纵横比。