javascript - change only the background-image smooth without text in front of it -

i have website, want change between images in background smoothly. actual javascript-code it:

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 ); 

now, want change images slowly. have tried lot jquery-fadein/fadeout-methods this:

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 ); 

the problem is, there buttons , text in container , changes images. want text , buttons in front time, background should fadein/fadeout. english not perfect, hope understand problem.

can me please?

nina_berlini

i have uses 2 elements background achieve effect. check demo on https://jsfiddle.net/n380u3cy/1/

html:

<div class="container">   <div class="background"></div>   <div class="background"></div>   <button>     test button   </button> </div> 

css:

.container { position: relative; line-height: 100px; }   .container > .background,   .container > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; z-index: 0; }    .container > *:not(.background) { position: relative; z-index: 1; } 

javascript:

var bg=[           'images/best.jpg',           'images/61182.jpg',           'images/bg.jpg'        ]; var transition = 1000;  $('.background').css('background-image','url('+bg[bg.length - 1]+')'); window.setinterval(   function() {     img=bg.shift();     bg.push(img);      var $backgrounds = $('.background');         $backgrounds.eq(1).hide(0).css({         'background-image': 'url('+img+')'     }).fadein(transition * .9);      $backgrounds.eq(0).show(0).fadeout(transition, function(){         $(this).show(0).css({         'background-image': 'url('+img+')'       });       $backgrounds.eq(1).hide(0);     });   }, 2000 );