html - 响应式 CSS 背景图像问题

Question

我使用 Foundation 5 框架来设计页面。它在背景图像的顶部有一个 Logo 。链接:Demo Page

这两张图片的样式是:

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

Answer 1

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

要么使高度相对于背景图像大小，要么使背景图像大小保持不变。