Crossfade Images on Body - image

Question

Building a WordPress theme and trying to crossfade multiple background images on the body tag and not on a div!
I have been trying to use the tutorial here: http://css3.bradshawenterprises.com/cfimg/ | Demo 3
with no success
Is it possibe to do without javascript and jquery and just use css only! Currently my Body css looks like this....
body {
font-family: 'Arial', courier, sans-serif;
background:url('ASSETS/bg2.jpg')no-repeat top left;
background-size:cover;
background-attachment:fixed
}
I do have another image to crossfade in my ASSETS folder called bg.jpg.

Answer 1

you could use a keyframe animation for this. Something like:
body{
height:100%;
background:red;
-webkit-animation: 9s fadeThis infinite;
animation: 9s fadeThis infinite;
}
#-webkit-keyframes fadeThis{
0%{background:url(http://lorempixel.com/1000/900/);}
50%{background:url(http://lorempixel.com/900/900/);}
100%{background:url(http://lorempixel.com/1000/900/);}
}
#keyframes fadeThis{
0%{background:url(http://lorempixel.com/1000/900/);}
50%{background:url(http://lorempixel.com/900/900/);}
100%{background:url(http://lorempixel.com/1000/900/);}
}
should crossfade for you.
See caniuse for more information on prefixing requirements.

Answer 2

Here is what I ended up doing! That tutorial that I referenced above originally still did not work so I tweaked it slightly...
The CSS
body {
font-family: 'Arial', courier, sans-serif;
background:url('ASSETS/bg.jpg')no-repeat top left;
background-size:cover;
background-attachment:fixed;
}
and then...
#cf {
position:absolute;
height:100%;
width:100%;
}
#cf img {
position:fixed;
background-size:cover;
background-attachment:fixed;
top:0; left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out
}
#keyframes cfFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf > .top {
animation-name:cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
The HTML
<div id="cf">
<img class="top" src="<?php echo get_template_directory_uri(); ?>/ASSETS/bg2.jpg">
</div>
for those developing a WordPress theme like myself I added the opening CF div right after the body tag in my header file and of course closing that right before the ending Body Tag in the footer!
I then used z-index on the header, menu and content elements so tht the crossfade div is always the background! Also the css may need tweaking for mobile and tablet devices.