How can I properly make my hero image/banner image responsive? - html

Question

Currently trying to add an image to my section-'header'. Soon we have to make the site responsive, and I am currently struggling with getting the full picture to resize, when resizing the browser-window
when I use background-size: cover;, resizing will cut off a lot of the image. When using background-size: 100%;, it will leave a massive "chin", which just adds up empty-space under the page's buttons which is nothing more than just the background-color + it will get somewhat squeezed into the header (the header is fixed).
Do not mind the header-content itself. making that responsive will be done in the future
Is there a way I can combat this?
CSS
hero-image {
background-image: url(/img/header-background.jpeg);
background-size: cover;
background-repeat: no-repeat;
overflow:hidden;
width: 100%;
}
#page-header {
height: 100vh;
background-color: #1c1b39;
color: #ffffff;
}
#page-header h1 {
padding-top: 15%;
font-size: 3em;
letter-spacing: 0.1em;
text-transform: uppercase;
}
#page-header p {
padding-top: 1%;
font-size: 1.5em;
max-width: 780px;
margin: 0 auto;
opacity: 0.5;
}
button {
margin-top: 5%;
border-radius: 30px;
width: 300px;
height: 60px;
text-transform: uppercase;
font-size: 1.5em;
}
#button-reserve, #button-trailer:hover {
background-color: #ff4242;
}
#button-reserve:hover, #button-trailer{
background-color: inherit;
border: 5px solid #ff4242;
color: #ff4242;
}
#button-reserve:hover, #button-trailer:hover{
transition: 0.5s;
}
#button-reserve {
color: #ffffff;
border-style: none;
}
#button-trailer:hover {
color: #ffffff;
}
html
<section id="page-header" class="hero-image">
<h1>Buitenaards leuk: Coderen!</h1>
<p>Op een leuke en speelse manier de vaardigheden van de toekomst ontdekken. Ideaal voor het basisonderwijs</p>
<button id="button-reserve">Reserveer workshop</button>
<button id="button-trailer">Bekijk trailer</button>
</section>

Answer 1

Just quickly looking at this, have you considered using background-size: contain; rather than cover?
It will allow the background to be responsive but does have limitations.

Answer 2

Using background-size: cover; will resize the background image to make sure the element is fully covered. Stretching it to fit top-to-bottom. Depending on the image dimensions, this may display only a part of the image, and not all of it.
But using background-size: contain; resizes the background image to make sure it remains fully visible.
So the code below will make your image responsive, but it will not cover the full height of the viewport.
.hero-image {
background-image: url(/img/header-background.jpeg);
background-size: contain;
background-repeat: no-repeat;
overflow:hidden;
max-width: 100%;
}
But you can set the background-color the same as the image's background if you do not wish to use background-repeat: repeat-y;
EDIT: Don't for get to correct hero-image to .hero-image in your CSS.