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

Question

I have a website, where I want to change between images in the background very smoothly. This is my actual javaScript-code for 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, I want to change the images very slowly. I have tried a lot with jQuery-fadeIn/fadeOut-methods like 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, 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.

Can somebody help me please?

nina_berlini

[this post](http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image) should help - in that post they are bluring, in your case it's simpler, just the opacity will change — Jaromanda X, Sep 02 '16 at 09:09
It's obvious that they will disappear if they are inside container-1. Your navigation should be outside manipulated element. You didn't show your html structure, so I can't tell more about this. — , Sep 02 '16 at 09:27

score 0 · Accepted Answer · answered Sep 02 '16 at 09:27

I have uses 2 elements as background to achieve the effect. Also 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
);

score 0 · Answer 2 · answered Sep 02 '16 at 09:27

Make a wrapper and include both the background div and button div inside it with position absolute and the following CSS styles. This way you can control and animate the background separately from the buttons.

var bg = [
  'https://placehold.it/1001x201',
  'https://placehold.it/1002x202',
  'https://placehold.it/1003x203'
];

$('._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
);

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

.wrapper {
  position: relative;
  width: 100%;
  height: 200px;
}
._container-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: top center;
}
.buttons {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
  left: 0;
}
button {
  background: red;
  padding: 5px 10px;
  border: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="_container-1"></div>
  <div class="buttons">
    <button type="button">
      Button 1
    </button>
    <button type="button">
      Button 2
    </button>
  </div>
</div>

score 0 · Answer 3 · answered Sep 03 '16 at 15:15

0

thank you for your great solution. I am not well familiar with jQuery and have a question about your code:

  $Backgrounds.eq(1).hide(0).css({
    'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);

means it that the second "background-div" first hides, then get a new background-image and after that it ist fadeIn? And means hide(0) that it immediately hides?

nina_berlini

answered Sep 03 '16 at 15:15

nina_berlini

165
1
2
10

You may want to use the comment section next time, we call it a `chain` in jQuery which do things step by step while `eq` starts at index '0', so `.eq(1)` means the second element of `$Backgrounds` and `.hide(0)` means hide the element in 0 milliseconds then (yes immediately in this case). After that, apply the css which set the `background-image` property and fade it in in `Transition` milliseconds. – Zay Lau Sep 04 '16 at 04:38
You may also look at this http://blog.zay-dev.com/the-fluent-interface-no-more-void-function/ for more on the `chain` – Zay Lau Sep 04 '16 at 04:39
thanks al lot for this useful informations. Now I undersatand the first part of your logic. But I din't understand the second part of it completely : after the second background-div is fade in you show the first div (which has the old image) and fade it out. And then you show it again but with the actual image. But this is the same image which was fade in in the second background-div (part one). I don't understand that it works with three pictures – nina_berlini Sep 04 '16 at 14:34
Kindly note the `.eq(0).show(0)` is written to ensure the old background is showing for the `.fadeOut` effect, after it faded out, it's `background-image` property will be updated to new image and show immediately. I feel it will be a way that allows maintaining the logic a lot easier since the concept `$Backgrounds.eq(0)` is the actual background , `$Backgrounds.eq(1)` is used to achieve the effect only. After that, we resume the first background and prepare for the next transform. So that when debugging or maintaining, you won't get lost of guessing which is the actual showing background. – Zay Lau Sep 05 '16 at 03:01

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

3 Answers3