响应CSS背景图片问题

我用基金会5框架来设计一个页面。它在背景图像的顶部放置了一个徽标。链接：Demo Page 响应CSS背景图片问题

这些两个图像的样式是：

header { 
    position: relative; 
} 
.logo { 
    background: url("../img/text2save.png"); 
    background-position: left top; 
    background-repeat: no-repeat; 
    background-size: contain; 
    position: absolute; 
    z-index: 2; 
    width: 20%; 
    height: 80px; 
} 
header div { 
    background: url("../img/banner.jpg"); 
    background-repeat: no-repeat; 
    height: 300px; 
    background-size: 100%; 

}

问题：当浏览器被调整大小向下的背景图像离开下方即空白空间，在另一元件向下移动。我找不出解决方案。

网站：http://text2save.tushark.com.np

来源

2014-01-14 Tushar Khatiwada

的问题是，因为你正在使用你的DIV

最简单的方式，以不显示空白（坏）静态高度：

background-size: auto 100%;

使用媒体查询（最好）：

@media (max-width:500px) { 
    header div{ 
    height : 150px; 
    } 
}

和更好的解决方案：

不要你的形象上使用的文字，对HT最好写毫升，永远会显示它。

来源

2014-01-14 05:10:46 kamus

之所以有多余的空间，是因为你有静态设置页眉高度300像素。与此同时，背景图片在调整页面大小时会缩放，因为它的大小是页面宽度的100％，当您将窗口缩小/变大时，宽度会发生变化。

要么使高度相对于背景图像大小，要么使背景图像大小静态。

来源

2014-01-14 05:01:01 Christina

感谢您的指导。我使用了不同的媒体查询并更改了相应查询的高度样式。 –

响应CSS背景图片问题

回答

相关问题