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

我有一个600px高的标题，它使用背景图像作为其bg。当屏幕超过1600像素时，我使用封面并且默认包含。重叠标题是一个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

来源

2012-12-17 suludi

如果你把'background-size：1600px 600px'怎么办？它保持你的背景的高度和宽度（不知道这是你想要做的） – cheesemacfly

我希望我的标题始终是600px高，并且bg-image可以用封面和包含进行缩放。 – suludi

所以你的背景图片不会保持正确的比例？ – cheesemacfly

要解决我的问题，需要申请：背景尺寸：100％600px的;

这样标题总是600px高，图像保持其纵横比。

来源

2012-12-17 22:22:27 suludi

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

回答

相关问题