Background slideshow with CSS (fullscreen+responsive)

Question

Is there an easy way, using only CSS, to enable background image slideshow? I have the background image defined as fullscreen and responsive inside the html property in CSS and would like it to have a simple transition effect. The CSS looks like this:

 html { background: url(slike/bg.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Do I need to define it in html and make a new CSS class? The only 'problem' is that the backgrounds need to be fullscreen and responsive.

Answer 1

You can do so by using the container div like this

 html,body { width:100%; height:100%; } body { margin: 0; } .container { width:100%; height:100%; } #slideshow { list-style: none; margin: 0; padding: 0; position: relative; width:100%; height:100%; display: inline-block; } .elemnt,.elemnt1,.elemnt2,.elemnt3 { position: absolute; left: 0; width: 100%; background-repeat: no-repeat; background-size: cover; height: 100%; display: inline-block; text-align: center; } span{ border: 1px solid #000; border-radius: 3px; box-shadow: 0 0 5px 0 hsla(0,0%,30%, .3); font-size:4em; background-color:#fff } .elemnt { animation: xfade 16s 8s infinite; background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg'); } .elemnt1 { animation: xfade 16s 6s infinite; background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/sahara-desert-by-ellie-1024x683.jpg'); } .elemnt2 { animation: xfade 16s 2s infinite; background-image: url('https://pbs.twimg.com/media/C4JYsjcWYAAixfx.jpg'); } .elemnt3 { animation: xfade 16s 0s infinite; background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg'); } @keyframes xfade{ 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } } @keyframes xfade1{ 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } } @keyframes xfade2{ 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } } @keyframes xfade3{ 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } } 

 <div class="container"> <div id="slideshow"> <div class="elemnt"><span>Text Slider 1</span></div> <div class="elemnt1"><span>Text Slider 2</span></div> <div class="elemnt2"><span>Text Slider 3</span></div> <div class="elemnt3"><span>Text Slider 4</span></div> </div> </div> 

Try this now the slider is using only css you can modify the timing, by changing the animation duration