Solución:
La saturación funciona de la misma manera que la opacidad, no puede aplicar el efecto a un padre y luego deshacerlo en un hijo. Su mejor opción probablemente sería hacer que la imagen en escala de grises sea un elemento secundario de su sección, pero no un elemento primario de la imagen:
<section>
<figure class="desaturate" style="background-image: url('bg-img-1.jpg');"></figure>
<div class="row">
<div class="col-md-12">
<img src="https://foroayuda.es/img-2.jpg" class="img-responsive saturate" alt="" />
</div>
</div>
</section>
Tu otra opción sería heredar el fondo en un ::before o ::after pseudo elemento y aplique el filtro allí:
.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");
}
Puede ver una demostración aquí: http://codepen.io/Godwin/pen/ogLPvR.
Editar: Solo por el interés, hay otra forma de hacer esto, pero aún no tiene un alto nivel de compatibilidad con el navegador:
.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;
}
Referencia: https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
Ejemplo: http://codepen.io/Godwin/pen/raLZVr
Soporte: http://caniuse.com/#feat=css-backgroundblendmode