If you want to use percentage for your height, you could add a little (:after), and set a padding according to your desired proportion.

.page-wrapper {
    height: 100%;
}

.div-page-image {
    background-image: url('https://source.unsplash.com/random');
    background-size: cover;
    background-repeat: no-repeat;
}

.div-page-image:after {
   content: "";
   padding-top: 65%;
   display: block
}

<div class="page-wrapper">
    <div class="div-page-image">

    </div>
</div>

The background image isn’t showing… (I also have a navbar if that’s uh? important)

• directory https://i.stack.imgur.com/n1W2k.png

So this is the current code I have right now:

<div class="page-wrapper">
    <div class="div-page-image">

    </div>
</div>

.page-wrapper {
    height: 100%;
}

.div-page-image {
    background-image: url('./pictures/city.png');
    width: 100%;
    height: 20%;
}