CSS to Desaturate Background Image Only WIth Other Images in Div Stay Saturated

Saturation works in the same way as opacity does, you can't apply the effect to a parent and then undo it in a child. Your best option would probably be to make the grayscaled image a child of your section but not a parent of the image:

<section>
  <figure class="desaturate" style="background-image: url('bg-img-1.jpg');"></figure>
  <div class="row">
    <div class="col-md-12">
      <img src="img-2.jpg" class="img-responsive saturate" alt="" />      
    </div>
  </div>
</section>

Your other option would be to inherit the background in a ::before or ::after pseudo element and apply the filter there:

.desaturate {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.desaturate:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
   /*grayscale for background image*/
  -webkit-filter: grayscale(1); 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%);
  filter: gray; 
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

You can see a demo here: http://codepen.io/Godwin/pen/ogLPvR.

Edit: Just for sake of interest, there is another way of doing this but it doesn't have high browser support yet:

.desaturate {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*grayscale for background image*/
    background-color: #FFF;
    background-blend-mode: luminosity, normal;
}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

Example: http://codepen.io/Godwin/pen/raLZVr

Support: http://caniuse.com/#feat=css-backgroundblendmode

Tags:

Css