Website background image not displayed on whole page

Question

My background image on my website is not being displayed on the whole page. It is under the div .hero-image

Screenshot of problem: http://prntscr.com/oe6bn7

    <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;
}

Where is your hero-image div? – Maze90 Jul 12 '19 at 15:36 — Maze90, Jul 12 '19 at 15:36
@Maze90 My apology's, I've edited the information. – Vexagon Jul 12 '19 at 15:43 — Vexagon, Jul 12 '19 at 15:43

Ethan Vu · Accepted Answer · 2019-07-12T15:53:51.290

It is because of the height: 100%, the background not being displayed on the whole page because the height of the .hero-image element itseft not being reached the whole page. Try this :

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

What the above CSS code does is it set the height of the .hero-image element equal to the heigh of the Browser View Height subtract the height of your navigation bar. This make your .hero-image element take all space left in the browser view

Website background image not displayed on whole page

1 Answers1