Problema con fadeTo

[rakshaka]

Bueno, tengo este código Javascript que básicamente cambia el fondo de un div en modo Fade:

Código Javascript:

<script>
$(document).ready(function() {
    
var contenedor = $('#intro');
var contenedor1 = $('#intro_description');
var tiempo = 2000;
contenedor.css({'background-image':'url(img/texturas/papel.jpg)'});
contenedor.css({'background-repeat':'repeat'});
 
function image1(){
setTimeout(function() {
contenedor.fadeTo('slow', 0.8, function() {
$(this).css({'background-image':'url(img/texturas/balsa.jpg)'});
image2();}).fadeTo('slow', 1);}
,tiempo);
}
 
function image2(){
setTimeout(function() {
contenedor1.fadeTo('slow', 0.8, function() {
$(this).css({'background-image':'url(img/texturas/carton2.jpg)'}); 
image3();
}).fadeTo('slow', 1); },tiempo);
}
 
function image3(){
setTimeout(function() {
contenedor.fadeTo('slow', 0.8, function() {
$(this).css({'background-image':'url(img/texturas/corcho.jpg)'}); 
image4();
}).fadeTo('slow', 1); },tiempo);
}
 
function image4(){
setTimeout(function() {
contenedor.fadeTo('slow', 0.8, function() {
$(this).css({'background-image':'url(img/texturas/cuero.jpg)'}); 
image5();
}).fadeTo('slow', 1); },tiempo);
}
 
function image5(){
setTimeout(function() {
contenedor.fadeTo('slow', 0.8, function() {
$(this).css({'background-image':'url(img/texturas/jean.jpg)'}); 
image6();
}).fadeTo('slow', 1); },tiempo);
}
 
function image6(){
setTimeout(function() {
contenedor.fadeTo('slow', 0.8, function() {
$(this).css({'background-image':'url(img/texturas/madera.jpg)'}); 
image7();
}).fadeTo('slow', 1); },tiempo);
}
 
function image7(){
setTimeout(function() {
contenedor.fadeTo('slow', 0.8, function() {
$(this).css({'background-image':'url(img/texturas/arpillera.jpg)'}); 
image1();
}).fadeTo('slow', 1); },tiempo);
}
 
image1();
 
});
</script>
 

El problema es que dentro de ese div yo tengo una imágen que termina teniendo el mismo efecto y necesito que no tenga efecto.

El código sería:

Código HTML:

<div id="content-wrapper">
            <section id="intro" class="intro-parallax">
                <div class="container">                             
                    <div class="row">
                    <div id="intro_description" class="col-sm-9 col-md-9">
                      </div>
                      <div class="col-sm-1 col-md-1"></div>
                      <div id="intro_form" class="col-sm-10 col-md-10">
                      <img src="img/home.png" class="col-md-12" alt="">
                      </div>
                    </div>  
                </div>
            </section>
 

Necesito que la imagen: <img src="img/home.png" class="col-md-12" alt=""> que sería (#intro_form img) no haga ningún efecto cuando cambia el fondo.

Podrán ayudarme?

[rakshaka]

No puedo hacerle funcionar correctamente.

[Alexis88]

Pon a la imagen por fuera y superponla al <div> utilizando márgenes. No hay forma de evitar afectar al contenido con el efecto aplicado al elemento contenedor.

Saludos