Background image not displaying in the desktop after adding the parent div

Question

I am displaying a background image which is working on the desktop and mobile device.

html, body{
 margin: 0;
 padding: 0;
 height: 100%;
}

.about_header_bg{
    background-image: url('https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg');
    background-attachment: fixed;
}
.banner_bg{
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  background-position: center;
  min-height:100%;
}

<div class="about_header_bg banner_bg"></div>

Now What I did, I added 2 divs which are header_relative and header_fixed.

<div class="header_relative">
<div class="header_fixed">
 <div class="about_header_bg banner_bg"></div>
</div>
</div>

I have to use header_relative and header_fixed in the mobile device, not on the desktop. So I added media queries and added my CSS

    @media all and (max-width : 768px)  {
    .header_relative{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -1;
     }
   .header_fixed{
    height: 100%;
    min-height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
    }
    }

After adding divs, In the mobile device background image is displaying but in the desktop, background image not displaying.

Would you help me out in this?

you need to keep height:100% of `hedear_relative` and `header_fixed` outside media query also ... if you don't do, the min-height:100% wont work (there is no reference) — Temani Afif, May 07 '18 at 10:15
.header_relative{height:100%;} .header_fixed{height:100%} adding this in the css will clear the issue i hope — Aashiq Rathnadas, May 07 '18 at 10:18

Background image not displaying in the desktop after adding the parent div

0 Answers0