title: change only the background-image smooth without text in front of it
body: <p>I have a website, where I want to change between images in the background very smoothly. This is my actual javaScript-code for it:</p>
  
  <pre><code>var bg=[
          'images/best.jpg',
          'images/61182.jpg',
          'images/bg.jpg'
         ];
  
     $('._container-1').css('background-image','url('+bg[2]+')');
  
  
  window.setInterval(
      function(){
          img=bg.shift();bg.push(img);
          document.getElementsByClassName('_container-1')[0].style.backgroundImage='url('+img+')';
      },
      10000
  );
  </code></pre>
  
  <p>Now, I want to change the images very slowly. I have tried a lot with jQuery-fadeIn/fadeOut-methods like this: </p>
  
  <pre><code>window.setInterval(
          function(){
              img=bg.shift();
              bg.push(img);
  
          $('._container-1').fadeOut(600, function() {
              $('._container-1').css('background-image','url('+img+')');
              $('._container-1').fadeIn(600);
          });
  
      },
      17000
  );
  </code></pre>
  
  <p>The problem is, that there are buttons and text in the container and they changes with the images. I want that the text and buttons are in the front all the time, only the background should fadeIn/fadeOut. My english is not perfect, I hope you understand my problem.</p>
  
  <p>Can somebody help me please? </p>
  
  <p>nina_berlini</p>