Hi guys
I found this code from Google.
Question:
1) How can I make the code auto-change background images after 4 hours? - CSS only, i don't want to use mayny script
2) About element 'background-size:cover',
I added some images in the code with 1366x768 resolution, and tried my page on a PC with 1600x900 resolution. When the background have been changed, it left a #FFF background-color on right & bottom.
Is there anyway to fix it?
Thanks for reading, hope you can help
Live Demo: HERE
I found this code from Google.
- CSS:
- Code:
<style>
body
{
background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;
animation:mybirst 25s infinite;
animation-delay:5s;
-moz-animation-delay:5s; /* Firefox */
-webkit-animation-delay:5s; /*Safari and Chrome */
-moz-animation:mybirst 25s infinite; /* Firefox */
-webkit-animation:mybirst 25s infinite; /* Safari and Chrome */
}
@keyframes mybirst
{
0% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
33% {background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;}
66% {background: url('https://dl.dropbox.com/u/47626020/maplestory_wallpaper_05_1600x1200.jpg') no-repeat #FFF fixed;}
100% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
}
@-moz-keyframes mybirst /* Firefox */
{
0% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
33% {background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;}
66% {background: url('https://dl.dropbox.com/u/47626020/maplestory_wallpaper_05_1600x1200.jpg') no-repeat #FFF fixed;}
100% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
}
@-webkit-keyframes mybirst /* Safari and Chrome */
{
0% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
33% {background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;}
66% {background: url('https://dl.dropbox.com/u/47626020/maplestory_wallpaper_05_1600x1200.jpg') no-repeat #FFF fixed;}
100% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
}
</style>
Question:
1) How can I make the code auto-change background images after 4 hours? - CSS only, i don't want to use mayny script
2) About element 'background-size:cover',
I added some images in the code with 1366x768 resolution, and tried my page on a PC with 1600x900 resolution. When the background have been changed, it left a #FFF background-color on right & bottom.
Is there anyway to fix it?
Thanks for reading, hope you can help
Live Demo: HERE
Last edited by sarkzkalie01 on September 8th 2014, 5:13 am; edited 1 time in total