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

i have taken through stackoverflow hours now, , have found topic similar trying achieve

javascript, how change background of div tag every x seconds

when modify solution in script, no background image @ thought come source fresh eyes , thoughts.

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

want somehow able use several images background , have them change out every 5 or seconds. how do this?

here 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 not image position top center(even when specified in css.) on appreciated!

you try using different classes each image, , swap out css classes in 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 kind of animation trying do, fadeout , 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); });