How do I change the opacity of a background image without affecting child elements?

Question

I am trying to make the background image at 70% opacity without affecting the text in front of it (within the same div).

HTML

#home {
  opacity: 0.7;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("...");
  min-height: 100%;
  overflow: hidden;
}

div .welcome {
  background-size: cover;
  vertical-align: middle;
  text-align: center;
  font-family: 'Lobster', cursive;
  font-weight: 900;
  font-size: 60px;
  color: black;
  margin: auto;
}

<div id="home" class="section">
            <p class="welcome"><strong>Hello,<br>My name is Sean</strong></p>
          </div>

Possible duplicate of [How to apply an opacity without affecting a child element with html/css?](http://stackoverflow.com/questions/10021302/how-to-apply-an-opacity-without-affecting-a-child-element-with-html-css) — Serlite, Nov 03 '16 at 18:14
Or alternatively [CSS background-image-opacity?](http://stackoverflow.com/questions/6890218/css-background-image-opacity) — Serlite, Nov 03 '16 at 18:15

Asons · Answer 1 · 2016-11-03T18:25:09.403

By using a pseudo element and position:absolute

Do note that element that is a direct child of the home will need a position, like I set to the content, or you need to set z-index: -1 on the pseudo element, and if not, the pseudo will be layered on top

body {
  background: blue
}
#home {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

#home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(http://placehold.it/200/f00);  /*  image is red but blue shine 
                                                           through so becomes purple */
}

.content {
  position: relative;
  color: white;
}

<div id="home">

  <div class="content">
    
    Content not affected
    
  </div>
  
</div>

How do I change the opacity of a background image without affecting child elements?

1 Answers1