Web site with body background image - image shows through all divs

I have a web page with a background image on the element.

I then have a series of divs and spans on the page for the content.

I am happy that the background image shows through most of the divs, but sometimes I need the div to be entirely opaque to all content below it.

body {
  background-image: url('https://images.unsplash.com/photo-1739538475083-43bbf5c47646?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDE2MDkzMDB8&ixlib=rb-4.0.3&q=80&w=400');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.8;
}

.outer {
  width: 60%;
  height: 400px;
  margin: auto;
  background: white;
  padding-top: 2rem;
}

.inner {
  width: 30%;
  height: 50%;
  margin: auto;
  text-align: center;
  display: flex;
}

.top {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 3rem;
  width: 40%;
  margin: auto;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  font-size: 200%;
  background: white;
  text-align: center;
}

.left {
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

<body>
  <div class='top'>
    This is the top
  </div>
  <div class='outer'>
    <div class='inner'>
      <div class='left'>
        Inner
      </div>
      <div class='left'>

        <img height=200px; width=200px;
               src='https://images.unsplash.com/photo-1739961097716-064cb40a941e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDE2MTEzNzh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
      </div>
    </div>
  </div>
</body>

code-pen

In the code-pen I need to somehow to make the image of the car not show the background image.

Solution

You HTML/CSS structure is fundamentally flawed. You are doing it all wrong. You need to learn the basics of HTML and CSS structure before attempting something like this.

But to fix your problem, use RGBA instead of opacity.

Opacity has limitations and will effect all child elements. Since you are putting opacity on your <body> (which is totally wrong BTW) it will effect all the children no matter what you do.

body { 
background-image: url('https://images.unsplash.com/photo-1739538475083-43bbf5c47646?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDE2MDkzMDB8&ixlib=rb-4.0.3&q=80&w=400');
  background-repeat : no-repeat ;
  background-position : center;
  background-size: contain;
  width: 400px;
  margin: 0 auto;
}

.top { 
  position:sticky;
  top:0;
  z-index:1;
  height: 3rem;
  width:100%;
  margin: auto;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  font-size: 200%;
  background : rgba(255,255,255,0.5);
  text-align: center;
}

.outer { 
  width: 100%;
  height: 400px;
  background : rgba(255,255,255,0.5);
}

.inner {
    width: 100%;
    height:50%;
    text-align: center;
}

```