Setting background image not showing on child divs - html

Question

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

Answer 1

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>