Web Site Background Change Effect

Web Site Background Change Slide Show Effect : Source code

Easy and simple steps to add it to your own website


Tutorial and source code for the easy way to add a background change effect slide show effect to your web site or the web page with few simple steps.

Step 1


Add the code to the end of header part in the web page source code.

<!--background slide change-->
<style>
body {
       margin:0; padding:0;
   }
#mt-bg {
       position:absolute;
       left:0;
       right:0;
       bottom:0;
       top:0;
       overflow:hidden;
       z-index:-1;
       background-position:center;
   }
#mt-bg img {
       width:100%;
       min-width:100%;
       min-height:100%;
       z-index:0;
   }
</style>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>
<!--background slide change-->


Step 2



Add the code below  to the end body section of the web page source code

<!--background slide change-->
<div id="mt-bg" class="slideshow">
        <img src="background-change-effect-image-1.jpg">
        <img src="background-change-effect-image-2.jpg">
</div>
<!--background slide change-->

Step 3 ( Finish )

Your are done. Please make sure that you have replace background-change-effect-image with your own image and do a quick Google search and download jquery.cycle.all.latest.js and jquery.min.js  paste the files to your web site folder and link the two files as it is in the header section.

-End of tutorial-

ps. 
example of linking the jquery file :
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.latest.js"></script> 

Read this again and Try it with yourself. You can do it easily with 3 steps.Add a comment below the post  if you need any help. We are always ready to help you.