Child divs are not displaying the background image set in the background

I have two sections on my website - About Us and Contact Us. The background property for the Contact Us section is functioning properly. However, I am now trying to add a background image to the parent wrappers of both divs so that the background image can be seen above both sections. I'm currently facing an issue 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: contain;
  background-position: right;
}

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

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

Answer №1

Adjust the z-index values for both child divs to -1.

The CSS property Z Index (z-index) determines the stacking order of HTML elements that overlap. Elements with a higher z-index value will appear above those with a lower value. Please note that z-index only applies to positioned elements (e.g., 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unused sizing attributes in IMG tags

I can't seem to figure out what's going wrong here... I want the image tag to initially display the 250px wide "small" image, and then allow the browser to select the most suitable image using the srcset and sizes attributes - essentially, the " ...

Issues with hover functionality in Javascript, CSS, and HTML

Seeking assistance with my JavaScript, HTML, and CSS development, I ran into an issue while trying to create a hovering function for my webpage. Despite my efforts, the links are not displaying anything when hovered over, and the divs meant for specific ho ...

Select the even-numbered occurrences of a specific class in CSS using the nth-child()

I am encountering an issue with my table layout. The structure is similar to the following: <tbody> <tr class="row">...</tr> <tr class="row--expanded">...</tr> <tr class="row">...</ ...

Instead of setting a fixed value, vary the background color dynamically

def dynamic_color(value, loop_name, breakpoints, metrics, symbol = ''): facts = [(round(item)) for item in value] metrics += '''<tr><th>'''+ loop_name +'''</th>''& ...

Positioning an element absolutely inside a Material-UI React dialog

Currently, I am working on a Dialog component that includes a button located in the bottom right corner. When this button is clicked, it triggers the display of another div containing a list of items. However, I have encountered an issue where the list is ...

Query inputting time displaying additional numerical values beyond just minutes

I am adding a time field to a table with a length of 6 in the database. Utilizing the Tempos Dominus Bootstrap library for the time within the form HTML Form <div class="form-group"> <label for="time">Hora</label> ...

Is it possible to integrate Laravel as the backend for an already existing HTML website template?

I recently designed an HTML template for a salon listing directory site, and while it looks great, I realize I also need a backend solution to manage listings, add advertisements, and more. Can I seamlessly integrate a Laravel-based admin panel into my c ...

Navigation website with a twist

My design features a main navigation that is rotated 90 degrees, while the sub-menu remains horizontally aligned. <div id="nav"> <ul> <li><a href="#">Woonaccessoires</a></li> ...

Show only the present y-coordinate in the ToolTip of a chart.js

I am currently working on developing a chart using Chart.js, and my goal is to only show the y-axis value in the tooltip. The current display shows: date name_of_line: measurement example: Jan 1, 2020, 8:00:00 AM 5th Percentile: 100 oz. However, I would ...

These coding languages are becoming more popular; however, the <p> tag is nowhere to be found in the slid

Inspect and Fix the Code: Missing p tag when clicked HTML Slide up/down <div class="slideme" class="center"> <h1>Hello,</h1> <p>Can you see Me</p> </div> <but ...

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

What is the best way to customize HTML5 input validation styling without completely removing the default browser styling?

As I work on creating an address form for my web application, I find myself struggling to define the styling rules for HTML5 form validation that includes the required attribute. The examples and behaviors discussed below are all specific to Firefox. The ...

What steps should be taken to position the Header and search bar in the middle of the screen?

How can I center the title and search bar on a website using Bootstrap? I've tried adding my-auto, but it doesn't work. Any suggestions?https://i.sstatic.net/3uuhT.png <!DOCTYPE html> <html lang="en"> <head> < ...

Fixing a dropdown menu with multiple levels

I am attempting to create a dropdown menu with multiple levels. However, when I hover over the first level, the second level appears slightly above and to the left of the first level. I want the second level to appear directly below the first level in the ...

Troubles with CSS in MUI Component Integration

How can I successfully implement a vertical timeline using Material UI in React? I've set it up, but the CSS isn't functioning as expected. Is there an error in my implementation? List of Dependencies: "@emotion/react": "^11.11.1& ...

Issues with Bootstrap Collapse functionality on an HTML document

Trying my hand at crafting a FAQ dropdown menu using bootstrap collapse. I've set up the collapse like this: <div class="container textcontainer accordion" id="accordionExample"> <div class="card"> <div class="card ...

Center and justify image inside flexbox using MUI

Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...

Creating a PHP form

I am in the process of creating a simple inventory system and I would like to include a drop-down menu for users to select a part and input the quantity. The drop-down menu will be populated with items from a mySQL database. While I am comfortable with myS ...

The block tag on line 8 is invalid: 'endblock'. Have you perhaps overlooked registering or loading this tag?

As a newcomer to Django, I have been learning from various Youtube tutorials. Even though I followed the steps exactly, I encountered a block tag error in my code. Here is an excerpt from my base.html template: <head> <meta charset="UTF-8"& ...

Creating a Multilevel Dropdown Menu: A Step-by-Step Guide

I am curious about how to create a multilevel dropdown menu using Bootstrap 5 and vanilla JavaScript. I created an example based on the Bootstrap 5 dropdowns component documentation, but it did not display when I clicked on it. The issue seems to be relat ...