How to make this background-image responsive

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

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:

1. We first create a container for the background like you did with <div class="single-hero-slide bg-img slide-background-overlay"></div>
2. Next, you set an height and/or a width with width and height CSS properties
3. 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

Answer 2

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