html - 无法显示背景图片的全高？

Question

我想在 div 中有一个图像作为背景，并且我希望它能够响应并在调整浏览器大小时像标记内的图像一样缩放。但是我在这里做错了什么，因为我的图像不是全高!？它只有 80 像素高。图片为 1500 x 650 像素。如果我将高度设置为 650px，那么它可以正常工作，但尽管浏览器窗口较小，但它具有相同的高度! Preciate some help to solve this problem.

<div id="introContainer">   
<h1>Test</h1>
</div>


#introContainer
{
background-image: url('bilderGuide/bilderLayout/bgStart2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

Answer 1

它的高度是 80px，因为你的 "div id="introContainer"的内容只有那么大(div 根据内容调整)。也许尝试给你的 div 一个固定的位置，底部:0px 和顶部:0px；它会根据窗口高度进行调整。这对我有用:

.coverDiv
{
    position: fixed;
    z-index: 0;
    top: 25px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
    border-style: none;
    border-width: 0px;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-clip: content-box;
    background-origin: border-box;
    background-image: url('../../Images/Backgrounds/HongKong.jpg');
}