How to make this background-image responsive - html

Question

I'm trying to make my "Icon_POS_bitmap.png" responsive. If I view the Website on a laptop, the image is cut off at the bottom. I know i can't put the .hero-slides .single-hero-slides on a fixed 1000px height. But height: 100%; and height: auto; doesn't seem to work.
When I try to set things on auto or 100%, the image disappears and the following div "sonar-project-areas" goes at the top.
HTML
<section class="hero-area">
<div class="hero-slides">
<!-- Single Hero Slide -->
<div class="single-hero-slide bg-img slide-background-overlay" style="background-image: url(img/bg-img/Icon_POS_bitmap.png);">
</div>
</div>
</section>
CSS
.hero-slides .single-hero-slide {
height: 1000px;
width: 100%;
position: relative;
z-index: 1;
-webkit-transition-duration: 800ms;
transition-duration: 800ms;
overflow: visible;
/*cursor: pointer; */
}
.hero-slides .single-hero-slide .hero-slides-content {
position: relative;
z-index: 1;
-webkit-transform: translateY(75%);
transform: translateY(75%);
-webkit-transition-duration: 800ms;
transition-duration: 800ms;
bottom: 0;
}
.hero-slides .single-hero-slide .hero-slides-content .line {
width: 100px;
height: 1px;
background-color: #ffffff;
margin-bottom: 30px;
display: block;
}
.hero-slides .single-hero-slide .hero-slides-content h2 {
color: #ffffff;
font-weight: 100;
}
.hero-slides .single-hero-slide .hero-slides-content p {
color: #ffffff;
margin-bottom: 0;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
margin-top: 140px;
}
.hero-slides .single-hero-slide:hover .hero-slides-content {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.hero-slides .single-hero-slide:hover p {
margin-top: 40px;
}
.bg-img {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.slide-background-overlay {
position: relative;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
}
.slide-background-overlay::after {
content: '';
position: absolute;
height: 60%;
width: 100%;
z-index: -1;
bottom: 0;
left: 0;
}
The original Template i use is this: https://colorlib.com/wp/template/sonar/
I modify it for my needs.
I use html/css/js from time to time but i can't find the issue.
Greetings Adrian

Answer 1

This is what you're trying to do, I added height: 100vh to the main container and moved the style="background: ...." inside the css in .bg-img . I also added margin: 0; padding: 0 to the body
body {
margin: 0;
paddong: 0;
}
.hero-slides .single-hero-slide {
height: 100vh;
/* You can change this to 50vh (50% of the screen width) and will still be responsive */
width: 100%;
position: relative;
z-index: 1;
-webkit-transition-duration: 800ms;
transition-duration: 800ms;
overflow: visible;
/*cursor: pointer; */
}
.hero-slides .single-hero-slide .hero-slides-content {
position: relative;
z-index: 1;
-webkit-transform: translateY(75%);
transform: translateY(75%);
-webkit-transition-duration: 800ms;
transition-duration: 800ms;
bottom: 0;
}
.hero-slides .single-hero-slide .hero-slides-content .line {
width: 100px;
height: 1px;
background-color: #ffffff;
margin-bottom: 30px;
display: block;
}
.hero-slides .single-hero-slide .hero-slides-content h2 {
color: #ffffff;
font-weight: 100;
}
.hero-slides .single-hero-slide .hero-slides-content p {
color: #ffffff;
margin-bottom: 0;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
margin-top: 140px;
}
.hero-slides .single-hero-slide:hover .hero-slides-content {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.hero-slides .single-hero-slide:hover p {
margin-top: 40px;
}
.bg-img {
background-image: url("https://picsum.photos/5472/3648?image=1074");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.slide-background-overlay {
position: relative;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
}
.slide-background-overlay::after {
content: "";
position: absolute;
height: 60%;
width: 100%;
z-index: -1;
bottom: 0;
left: 0;
}
<section class="hero-area">
<div class="hero-slides">
<!-- Single Hero Slide -->
<div class="single-hero-slide bg-img slide-background-overlay">
</div>
</div>
</section>

Answer 2

You seem to be trying to create a responsive background image. If that's the case, you'll find below a quick hint on how to do it.
Responsive image background:
We first create a container for the background like you did with <div class="single-hero-slide bg-img slide-background-overlay"></div>
Next, you set an height and/or a width with width and height CSS properties
After that, select an image to use as background and use background-size: cover or contain
.bg-img {
width: 30vw;
height: 100vh;
background: url('https://images.pexels.com/photos/1034677/pexels-photo-1034677.jpeg?cs=srgb&dl=adult-art-man-1034677.jpg&fm=jpg');
background-size: cover;
}
<div class="single-hero-slide bg-img slide-background-overlay"></div>
Here is a reference of this property : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size