I am creating a webpage for my project which requires that the background image should change every 10 seconds with nice transition (like fade effect). I managed to change wallpaper automatically but I am not able to configure it how can I do it. Below is the code that I've written. I am facing 2 problems as mentioned below.
1) Whenever the image changes every 10 seconds, I see BLANK BACKGROUND (WHITE BACKGROUND, NO IMAGE)
2) I am not able to configure how can I add smooth transition like fading effect whenever the background changes.
index.html
<html>
<head>
<title>Home | BM&A</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script tpye="text/javascript">
$(document).ready(function() {
var curImgId = 0;
var numberOfImages = 3;
window.setInterval(function() {
$('body').css('background-image','url(images/bg' + curImgId + '.png)');
curImgId = (curImgId + 1) % numberOfImages;
}, 10 * 1000);
})();
</script>
</head>
<body>
<img src="images/home_logo.png" alt="Logo" class="centeredImage" />
</body>
</html>
style.css
body {
background: #F4EEFE url(images/bgImage.png) center center fixed no-repeat;
-moz-background-size: 100%;
background-size: 100%;
}
.centeredImage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
}
