fade in background jquery

Question

I'm trying to fade some images on the background of my site but isn't working T_T . Thanks in advance !

HTML :

<body>
    <div id="menu1"></div>
    <div id="menu2"></div>
    <div id="menu3"></div>
</body>

CSS :

body {
    background-color: #1f304e;
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat; 
    background-attachment:fixed;
    background-position: center 0px;
}

JQuery :

$('#menu1').click(function(){
    $(body).animate({background : url('images/bg1.jpg') }, 600);
}); 
$('#menu2').click(function(){
    $(body).animate({background : url('images/bg2.jpg') }, 600);
}); 
$('#menu3').click(function(){
    $(body).animate({background : url('images/bg3.jpg') }, 600);
});

Are you putting the click function in `document.ready()` function? — Dinesh, Jul 24 '13 at 04:33

compid · Accepted Answer · 2013-07-24T04:48:46.867

You cannot directly animate the background image property of an element. You can fade in an entire element though, so try to create a div that contains the image, and fade that in.

Try to mimic the background with a div instead:

CSS:

#bg {
  background-color: #1f304e;
  background-image: url('images/bg.jpg');
  background-repeat: no-repeat; 
  background-attachment:fixed;
  background-position: center 0px;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

HTML:

<body>
  <div id="bg"></div>
  <div id="menu1"></div>
  <div id="menu2"></div>
  <div id="menu3"></div>
</body>

Javascript:

$('#menu1').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg1.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
}); 
$('#menu2').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg2.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
}); 
$('#menu3').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg3.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
});

This will fade out the background, swap the image, then fade it back in. If you want a proper crossfade, you will need at least two divs in the background.

I did the div "#bg" (i needed to magin -8 to fit the screen). but i used : $('#bg').animate({opacity: 0}, 'slow', function() { $(this).css({'background-image': 'url(images/bg2.jpg)'}).animate({opacity: 1}); }); it works almost perfect but the transition is white if i could fade in black it will fit. — BrunoWB, Jul 24 '13 at 05:15
you should set the body's margin to 0 to avoid the need for negative margins, and set the body's background color to black in order to have the "fade to black" effect — compid, Jul 24 '13 at 05:17
margin 0 didnt worked o.o so i had to use negative. black bg works ;) — BrunoWB, Jul 24 '13 at 05:22

score 4 · Answer 2 · answered May 04 '16 at 16:33

HTML

<div class="main"></div>

css

.main { 
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;  
    -o-transition: all 1s ease; 
    transition: all 1s ease;  
    background-image: url(imagesrc);
    background-size: cover;
    background-repeat: no-repeat;
}

JS

setTimeout(function() {

    $(".main").css("background-image", "url(imageSrc)");
}, 2000);

If you want to change background with multiple images then,

var backgroundPath = "images/";
var backgrounds = ["image1.png", "image2.png", "image3.png", "image4.png"];
var i = 0;

setTimeout(function() {

   var timer = setInterval(function() {

       $(".main").css("background-image", "url(" + backgroundPath + backgrounds[i] + ")");

       i ++;

       if (i >= backgrounds.length) {

           i = 0;
       }

   }, 2000);

 }, 3000);

Change the css and js according to your requirements. Cheers!!

fade in background jquery

2 Answers2

Linked