For those who looking to change background image on every 5sec or some period of time this post will be very useful. In the past we have done this using some scripts like jquery, now you can do this with few lines of CSS3.
CSS code
Below is the CSS code used
#background {
height: 100%;
width:100%;
position:absolute;
z-index:-1;
}
#background ul {
margin:0;
padding:0;
position:relative;
height: 100%; width: 100%; margin: 0;
}
#background li {
width:100%;
height: 100%;
position:absolute;
list-style:none;
opacity:0;
}
#background li.first-bg {
animation:first 15s linear infinite;
-moz-animation:first 15s linear infinite;/* firefox */
-webkit-animation:first 15s linear infinite;/* Safari and Chrome */
background:url('millenniumBridge.jpg') no-repeat;
background-size:cover;
}
#background li.second-bg {
animation:second 15s linear infinite;
-moz-animation:second 15s linear infinite;/* firefox */
-webkit-animation:second 15s linear infinite;/* Safari and Chrome */
background:url('bg_trinity.jpg') no-repeat;
background-size:cover;
}
#background li.third-bg {
animation:third 15s linear infinite;
-moz-animation:third 15s linear infinite;/* firefox */
-webkit-animation:third 15s linear infinite;/* Safari and Chrome */
background:url('bg_clare_college.jpg') no-repeat;
background-size:cover;
}
@keyframes first {
0% {opacity:1;}
30% {opacity:1;}
33% { opacity:0; }
97% { opacity:0; }
100%{ opacity:1; }
}
@keyframes second {
0% {opacity:0;}
30% {opacity:0;}
33% { opacity:1; }
63% { opacity:1; }
66% { opacity:0; }
100%{ opacity:0; }
}
@keyframes third {
0% {opacity:0;}
63% { opacity:0; }
66% { opacity:1; }
97% { opacity:1; }
100%{ opacity:0; }
}
/* firefox */
@-moz-keyframes first {
0% {opacity:1;}
30% {opacity:1;}
33% { opacity:0; }
97% { opacity:0; }
100%{ opacity:1; }
}
@-moz-keyframes second {
0% {opacity:0;}
30% {opacity:0;}
33% { opacity:1; }
63% { opacity:1; }
66% { opacity:0; }
100%{ opacity:0; }
}
@-moz-keyframes third {
0% {opacity:0;}
63% { opacity:0; }
66% { opacity:1; }
97% { opacity:1; }
100%{ opacity:0; }
}
/* Safari and Chrome */
@-webkit-keyframes first {
0% {opacity:1;}
30% {opacity:1;}
33% { opacity:0; }
97% { opacity:0; }
100%{ opacity:1; }
}
@-webkit-keyframes second {
0% {opacity:0;}
30% {opacity:0;}
33% { opacity:1; }
63% { opacity:1; }
66% { opacity:0; }
100%{ opacity:0; }
}
@-webkit-keyframes third {
0% {opacity:0;}
63% { opacity:0; }
66% { opacity:1; }
97% { opacity:1; }
100%{ opacity:0; }
}HTML code
Below is the html code here you can see that all images are called as background image of li. <div id=”background”>
<ul>
<li class="first-bg"></li>
<li class="second-bg"></li>
<li class="third-bg"></li>
</ul>
</div> Hope you enjoy this post. If you any have suggestions or comments. please post your comments.
