Question

我在网站上的背景图片未显示在整个页面上。它位于div .hero-image

下

    <div class="hero-image">
        <div class="hero-text">
        <h1>Ruan Kuypers</h1>
        <h2>Websites. Done. Right.</h2>
        <h3>A relighable business partner.</h3>
        </div>
    </div>

.hero-image{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("img/Header.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

Answer 1

这是因为height: 100%导致背景未显示在整个页面上，因为.hero-image元素的高度并未达到整个页面。试试这个：

.hero-image {
  height: calc(100vh - 'your navigation bar height'px);
  /*Other css rule*/
}

上面的CSS代码所做的是将.hero-image元素的高度设置为等于Browser View Height的高度减去导航栏的高度。这使您的.hero-image元素占据了浏览器视图中剩余的所有空间

网站背景图片未显示在整个页面上

1 个答案: