Unlike non-background images, setting the **opacity** of a background image *cannot* be done by simply setting the `opacity` property through CSS.

When opting for the opacity property of CSS for an HTML element, what will generally happen is that the opacity of the image in the background will change *and* the opacity changes will be reflected in its child elements.

Opacity is *only* to be applied on the background image without affecting any of the children elements.

# Method 1: Using absolute positioning and an image

Simply use absolute positioning on a normal `img` tag to make it seem like the `background-image` property is being used. The image only needs to be put inside of a `position: relative` container.

See the example below:


body {
  background: #e3e3e3;
  padding: 50px 0;
}
.my-container {
    position: relative;
    background: #696969;
    overflow: hidden;
}
.my-container h1 {
    padding: 10px;
    text-align: center;
    z-index: 2;
    position: relative;
    color: #000;
} 
.my-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0.5;
}

<html>
 <head>
 </head>
 <body>
   
      <div class="container">
      <div class="row">
      <div class="col-md-8 col-md-offset-2">
        
      <div class="my-container">
        <h1>Learn Learn Learn</h1>
        <img src="https://images.pexels.com/photos/1084542/pexels-photo-1084542.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      </div>
      </div>
      </div>
      </div>
 </body>
</html>

codemirror

> Change the value of the `opacity` property in the CSS ccode to make sure that *only* the background image is affected.

# Method 2: Using CSS Pseudo-Elements

By using CSS pseudo-elements of either `:before` or `:after`, a `div` is created with a background image and an `opacity` is set on it. 

See the example below:

body {
  background: #e3e3e3;
  padding: 50px 0;
}
.my-container {
    position: relative;
    background: #696969;
    overflow: hidden;
}
.my-container:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url('https://images.pexels.com/photos/1084542/pexels-photo-1084542.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}
.my-container h1 {
    padding: 10px;
    text-align: center;
    z-index: 2;
    position: relative;
    color: #000;
} 

<html>
 <head>
 </head>
 <body>
   
      <div class="container">
      <div class="row">
      <div class="col-md-8 col-md-offset-2">
        
      <div class="my-container">
        <h1>Learn Learn Learn</h1>
      </div>
      </div>
      </div>
      </div>
 </body>
</html>

> Change the value of the `opacity` property in the CSS code to make sure that *only* the background image is affected.

How to set the opacity of a background image using CSS

Use absolute positioning or CSS pseudo-elements to set background image opacity without affecting child elements.