Opacity property affecting some elements and not others

Question

I'm struggling to understand why when applying the opacity property to a div I have that holds a background-image the property seems to affect some text within my html but not others.

Here is the basic layout of my markup.

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

.background_image {
  width: 100%;
  height: 100%;
  /* content: ""; */
  background-image: url("../images/matador.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: -870px;
  opacity: 0.6;
}

.containers {
  display: flex;
  justify-content: space-around;
}

.text-container {
  margin: 40px;
  font-family: 'Space Mono', monospace;
  letter-spacing: .075em;
  font-size: 1.5em;
}

<body>
  <div class="background-image"></div>
  <!--(this div holds nothing)-->
  <div class="containers"></div>
  <!--(this div holds more divs and h2 tags)-->
  <div class="text-containers"></div>
  <!--(this div holds more divs and p tags)-->
  </body>

Basically I want the opacity to affect only the background-image so that the text in '.text-container' is more legible. The opacity seems to not affect the other '.container' element as well as leaves a footer/nav alone. Any guidance would be appreciated.

opacity on a parent div will result in opacity childs aswell — Ramon de Vries, Oct 16 '19 at 22:36
you could place a new `div` inside the `div` you originally had the background image on and then make that `100% width`, `100% height` and give that one opacity, making it leave the other childs alone — Ramon de Vries, Oct 16 '19 at 22:37

Opacity property affecting some elements and not others

0 Answers0