CODEWITHSUNDEEP
htmlcss
brianH
brianH

Reputation: 11

background image opacity with parent background color

The answers to CSS: set background image with opacity? describe a great background opacity fix using the pseudo element :after. However, if a parent division has a background color the transparent background image no longer shows, due to its use of z-index: -1. I've tried numerous work-arounds using this basic model to no avail.

Here is sample code. Note that without .locations_30 {background:white} it works great.

body {
  background-color: #fefbed;
  color: #444;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.locations_20 {
  position: relative;
}

.locations_20:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  background-image: url(../background_images/zenrockgarden_mod.jpg);
  background-repeat: no-repeat;
  left: 0%;
  top: 0%;
  background-size: 100% 100%;
  opacity: 0.27;
}

.locations_30 {
  background: white;
  width: 800px;
  padding: 75px;
} /*parent division with color will overrun z-index: -1*/
<body>
  <div class="locations_40">
    <div class="locations_30">
      <p class="locations_20">
        Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following:
        etc,,, <br> We are happy to offer the following: etc,,, <br>
      </p>
    </div>
  </div>
</body>

Upvotes: 1

Views: 196

Answers (1)

Asons
Asons

Reputation: 87191

If you update your .locations_20 rule like this it will work

.locations_20 {
  position: relative;
  z-index: 0;                    /*  added  */
}

Stack snippet

Note, since the image doesn't load here at SO, I added red to the .location_20's background so one can see it works

body {
  background-color: #fefbed;
  color: #444;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.locations_20 {
  position: relative;
  z-index: 0;                    /*  added  */
}

.locations_20:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  background-image: url(../background_images/zenrockgarden_mod.jpg);
  background-repeat: no-repeat;
  left: 0%;
  top: 0%;
  background-size: 100% 100%;
  opacity: 0.27;
  background-color: red;         /*  temp. added so we can see it  */
}

.locations_30 {
  background: white;
  width: 800px;
  padding: 75px;
}
<body>
  <div class="locations_40">
    <div class="locations_30">
      <p class="locations_20">
        Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following:
        etc,,, <br> We are happy to offer the following: etc,,, <br>
      </p>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions