Change Background image url of div

Question

i have a div for which i want to show multiple images in the background as a fade in fade out by changing the css background image am unable to find the best way.

JSFiddle

My HTML:

<div id="background"></div>

Jquery

var bgArr = ["http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p1.jpg", "images/TopImage-03.jpg"];
var i = 0;

// Start the slide show
var interval = self.setInterval("swapBkgnd()", 5000)

function swapBkgnd() {
  if (i > (bgArr.length - 1)) {
    i = 0
    $("#background").css("background-image", "url(" + bgArr[i] + ")");
  } else {
    $("#background").css("background-image", "url(" + bgArr[i] + ")");
  }
  i++;
};

CSS:

#background {
  position: absolute;
  min-height: 100%;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  background: url(http://2.bp.blogspot.com/-ayEwJpMGTPQ/USqliwPWo1I/AAAAAAAAHtI/ab6NHVy0Q48/s1600/tree.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Dhara Parmar · Accepted Answer · 2016-04-30T10:06:40.880

3

Use:

Jsfiddle: http://jsfiddle.net/ook3ah4p/

var interval = self.setInterval(swapBkgnd, 5000) // true syntax

instead of:

var interval = self.setInterval("swapBkgnd()", 5000) // wrong syntax

for animation:

$('#background')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': "url(" + bgArr[i] + ")"})
            .animate({opacity: 1});
    });

edited Apr 30 '16 at 10:06

answered Apr 30 '16 at 09:48

Dhara Parmar

8,021
1
16
27

superb working fine but fade effect is not happening – Shaik Apr 30 '16 at 09:50
you want to add fading effect while image changes right? – Dhara Parmar Apr 30 '16 at 09:55
@shaik This is the right answer, the fade effect should be done by you. – Joe Thomas Apr 30 '16 at 09:56
first thanks for the help i have a problem that is fading entire div that should be not the case coz the content in the div is also fading – Shaik Apr 30 '16 at 10:11
if you can help me on this wold be more help full for me – Shaik Apr 30 '16 at 10:22
so you just want to animate image? – Dhara Parmar Apr 30 '16 at 10:26
yes on the background the any content in that should not fade – Shaik Apr 30 '16 at 11:05
sorry for late reply – Shaik Apr 30 '16 at 11:05

score 0 · Answer 2 · answered Apr 30 '16 at 10:00

0

Set it up like this:

function swapBkgnd() {
  if (i > (bgArr.length - 1)) {
    i = 0;
  }
  $("#background").fadeOut("slow", function () {
    $(this).css("background-image", "url(" + bgArr[i] + ")");
    $(this).fadeIn("slow");
  });
  i++;
};

answered Apr 30 '16 at 10:00

Gerard

15,418
5
30
52

score 0 · Answer 3 · edited May 23 '17 at 12:08

Refering to this answer How to fade changing background image

var interval = self.setInterval(swapBkgnd, 5000)

function swapBkgnd() {
    if (i > (bgArr.length - 1)) {
        i = 0
        $('#background').fadeTo('slow', 0.3, function(){
            $(this).css('background-image', 'url(' + bgArr[i] + ')');
        }).fadeTo('slow', 1);
    } else {
        $('#background').fadeTo('slow', 0.3, function(){
            $(this).css('background-image', 'url(' + bgArr[i] + ')');
        }).fadeTo('slow', 1);
}
i++;
};

Change Background image url of div

3 Answers3