How can I rotate(or change) background image using CSS and Javascript

Question

I have taken a look through stackoverflow for hours now, and I have found a topic similar to what I am trying to achieve

JavaScript, How to change the background of a div tag every x seconds

When I modify this solution in my script, I get no background image at all so I thought I would come back to the source to get some fresh eyes and thoughts.

Here is my setup: HTML

    <div id="Background"></div>

CSS:

    .background-1 {
     background: url('Images/mybg1.jpg');
     -webkit-transition: background 500ms linear;
     -moz-transition: background 500ms linear;
     -o-transition: background 500ms linear;
     -ms-transition: background 500ms linear;
     transition: background 500ms linear;
     }

    .background-2 {
     background: url('Images/mybg2.jpg');
     -webkit-transition: background 500ms linear;
     -moz-transition: background 500ms linear;
     -o-transition: background 500ms linear;
     -ms-transition: background 500ms linear;
     transition: background 500ms linear;
     }

Javascript in the head tag

      <script>
      $(document).ready(function(){
      setInterval(function() {
        if($('#background').hasClass('background-1')) {
            $('#background').addClass('background-2');
            setTimeout(function() {
                $('#backdrop').removeClass('background-1');
            }, 1000);
        }
        else if($('#background').hasClass('background-2')) {
            $('#background').addClass('background-1');
            setTimeout(function() {
                $('#backdrop').removeClass('background-2');
            }, 1000);
        }
}, 2000);
});

I want to somehow be able to use several images for the background and have them change out every 5 or so seconds. How do I do this?

Here is what I have tried HTML

    <div id="Background">
    <img src="<%=skinpath%>/images/mybg2.jpg" class="bgM"/>  
    <img src="<%=skinpath%>/images/mybg1.jpg" class="bgM"/>
    </div>

CSS:

    #Background, img.bgM {
    background:#fff no-repeat 0 bottom;position:absolute;bottom:0;min-width:960px;min-height:100%;z-index:-99999; 
    background-position: top center;
    }

Javascript:

    <dnn:DnnJsInclude runat="server" FilePath="js/jquery.cycle.all.js" PathNameAlias="SkinPath" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 

    $(document).ready(function() {
            $('#Background').cycle({
            fx: 'fade',
            pager: '#smallnav', 
            pause:   1, 
            speed: 1800,
            timeout:  3500 
        });         
    });

This last solution worked however I could not get the image to position top center(even when specified in the css.) Any help on this is greatly appreciated!

Solution 1

You could try using different classes for each image, and then just swap out CSS classes in a given interval.

$(document).ready(function(){
  var seconds = 5000;
  var step = 0;
  var limit = 5;

  $("#Background").addClass("image-"+step);

  setInterval(function(){
    $("#Background").removeClass("image-"+step);
    step = (step > limit) ? 0 : step + 1;
    $("#Background").addClass("image-"+step);
  },seconds);
});

I'm not sure what kind of animation you are trying to do, but you could fadeOut and then fadeIn.

$(document).ready(function(){
  var seconds = 5000;
  var step = 0;
  var limit = 5;

  $("#Background").addClass("image-"+step).fadeIn(500);

  setInterval(function(){
    $("#Background").fadeOut(500,function(){
       $(this).removeClass("image-"+step);
       step = (step > limit) ? 0 : step + 1;
      $("#Background").addClass("image-"+step).fadeIn(500);
    });
  },seconds);
});

Solution 2

You can try swapping backgrounds like so:

Create CSS Class for each background and include transitions as part of the ruleset:

.background-1 {
 background: url('background-1.jpg');
 -webkit-transition: background 500ms linear;
 -moz-transition: background 500ms linear;
 -o-transition: background 500ms linear;
 -ms-transition: background 500ms linear;
 transition: background 500ms linear;

}

Add a script that will swap out the classes on a regular interval. (You would most likely wrap this script within $(document).ready) Since your transitioning backgrounds, you may not want the previous background immediately removed, so you can use a delay call to remove it after the transition would complete.

The following example would start the background switch every two seconds, and remove the previous background after 1 second. Since in my CSS, I declared that the transition should take .5 seconds, the new background is already there before the old one is removed:

setInterval(function() {
            if($('#background').hasClass('background-1')) {
                $('#background').addClass('background-2');
                setTimeout(function() {
                    $('#background').removeClass('background-1');
                }, 1000);
            }
            else if($('#background').hasClass('background-2')) {
                $('#background').addClass('background-1');
                setTimeout(function() {
                    $('#background').removeClass('background-2');
                }, 1000);
            }
}, 2000);

Note: The code that I've provided would require you to chain multiple if/else if statements together, there is probably a more efficient way to go about this.

I've done something similar (background colors instead of images) as a teaser for an upcoming project of mine, you can check it out here.

Update: Forgot to mention, make sure to declare one of the background classes in your Div element:

<div id="background" class="background-1"></div>

Comments

[Skullomania]

where do I specify my images? I plugged this in and added this to my CSS code .image1{background:#fff url('Images/kdmcbg1.jpg') no-repeat 0 bottom;} .image2{background:#fff url('Images/kdmcbg2.jpg') no-repeat 0 bottom;} is this what you meant?

[Skullomania]

I added the code you requested and i am not sure what I am doing wrong...I am still seeing an all white background. is there a jqery plugin that should be added?

[theaccordance]

No plugin, just the standard link to jQuery's library should suffice. Is your updated code viewable online?

[theaccordance]

Oh, I did forget to mention, make sure you've added the initial class to your background div.

[Skullomania]

I have currently included the plugin. I either get no css positioning like in the "what I have tried" portion of my original post or nothing at all.

[Skullomania]

code <dnn:DnnJsInclude runat="server" FilePath="js/jquery.cycle.all.js" PathNameAlias="SkinPath" />

[Sonny]

I'm not familiar with the DotNetNuke tags. You should troubleshoot by starting with an example from the site, and then making small changes until it looks like what you want to accomplish. I just noticed that the author has recently release a Cycle2. I'm updating my answer.

[Skullomania]

Thanks bro...I got it working...the JSFiddle helped alot. How do I now fade in or out the image for a smooth transition?

[Reactgular]

@Skullomania yea, but I had a dash .image-0{background} .image-1{background}.. etc..

[Skullomania]

I got it partly but, I cant get the second image to show up what am i missing? jsFiddle

[Reactgular]

@Skullomania, sorry my bad. Change (step < limit) to be (step > limit).

[Skullomania]

so I just got the first to transition to the second jsFiddle but when it gets there it just repeats the second...how do I loop it back to the first? Im sooo close! :)