Setting background image not showing on child divs

November 9, 2022

About Us and Contact Us are my two sections. The contact us section’s background property is working well. However, I now want to add a background picture to both divs’ parent wrappers. Therefore, the background image may be seen above both divs. I am unable to identify the issue that is preventing me from displaying the background image.

index.html:

 <div class="aboutus-contact-us-wrapper" >
    <div class="about-us-section">
     // content here
    </div>

    <div class="contact-us">
    // content here
    </div>

   </div>

style.css:

.aboutus-contact-us-wrapper {

  width: 100%;
  position: relative;
  background-image: url('./images/ourboardvector.png');
  background-size: 100%;
  background-position: right;
  background-size: contain;

}

.contact-us {
  width: 100%;
  height: 100vh;
  background-color: #181f2b;
  position: relative;
  border-bottom: 20px;
  color: #ffffff;
  position: relative;
}

.about-us-section {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #F1F1F1;
  font-family: 'Lato' !important;
}

>Solution :

Set z-index of both child divs to -1.

Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed )

.aboutus-contact-us-wrapper {
  width: 100%;
  position: relative;
  background-image: url('./images/ourboardvector.png');
  background-size: 100%;
  background-position: right;
  background-size: contain;
}

.contact-us {
  width: 100%;
  height: 100vh;
  background-color: #181f2b;
  position: relative;
  border-bottom: 20px;
  color: #ffffff;
  position: relative;
  z-index: -1;
}

.about-us-section {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #F1F1F1;
  font-family: 'Lato' !important;
  z-index: -1;
}

<div class="aboutus-contact-us-wrapper">
  <div class="about-us-section">
    // content here
  </div>

  <div class="contact-us">
    // content here
  </div>

</div>