0

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.

Improve this question

1 Answer 1

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

16 Comments

The slideshow CSS code goes inside the html tagged "container"?
Can you share the html of the slide show, so i can put it in the right place
<div class="crossfade"> <figure></figure> <figure></figure> <figure></figure> <figure></figure> <figure></figure> <figure></figure> <figure></figure> </div> , However, I don't have a CSS code for the slideshow that works as I want it to work (transitions are too quick, etc), and was based on another approach
is this what, you asked for !?
The loop is inconsistent and goes blank at the end of the series.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.