Fullscreen Background Image Slideshow with CSS3

Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations.

CSS3FullscreenSlideshow

From our sponsor: Learn from healthcare leaders in Northwestern鈥檚 Online MS in Healthcare Administration.

Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations.

The images are by Mark Sebastian and they are licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic License.

Note that this will only work in browsers supporting CSS animations.

This tutorial is a part of our latest CSS3 experiments; you can find more of those here:

The Markup

We’ll use an unordered list for the slideshow and we’ll add a span for each image and a division with a heading:

<ul class="cb-slideshow">
	<li>
		<span>Image 01</span>
		<div>
			<h3>re路lax路a路tion</h3>
		</div>
	</li>
	<li><!--...--></li>
	<li><!--...--></li>
</ul>

The spans are going to be the elements that will have the background images of the slideshow.

The CSS

Let’s style the unordered list first. It will be fixed and we will stretch it over the viewport. We’ll also use a :after pseudo-element in order to place a pattern on top of the image:

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}

We’ll use a repeated dot pattern but you could as well use, for example, a css gradient with some transparency.

The span that will contain a slideshow image will be positioned absolutely and have a width and height of 100%. Since we have some text inside, we’ll make the color transparent because we don’t want to see it. The background-size property value “cover” will make sure that the background image covers all the area of the element and hence it is the size of the screen, it will cover all the visible viewport. The opacity is set to 0. We’ll then change that in our animation:

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s; 
}

The animation for each span will last 36 seconds and run an inifinite number of times. But let’s look at the details in a while, first, we will style the division with the headline:

.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}

The animation for the title division will also take 36 seconds.

Now, we will define the background images for all the spans and the animation delay, so that each following slideshow image and title appear after 6 second of the previous one:

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.jpg);
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.jpg);
    animation-delay: 30s; 
}

.cb-slideshow li:nth-child(2) div { 
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    animation-delay: 30s; 
}

Now, let’s have a look at the slideshow animation. Each span will have an animation time of 36 seconds. In those 36 seconds we will change the opacity from 0 to 1 when the animation reaches 8%. And then this opacity gets kept until 17% are reached. When reaching 25% the opacity should already be 0 again and stay like that until the end.

Now, why those values? We want each image to be visible for 6 seconds and we know that at the end of a cycle, we want the first image to show again. We have 6 images, so we will need 36 seconds for a whole cycle to finish. Now, we need to “time” the opacity values accordingly. Knowing that our second image will start animating at 6 seconds, we need to know at what percentile of the animation this will require the first image to fade out. Dividing 6 by 36 gives us 0.166… which would be 16% for our keyframe step. Now, because we don’t want our image to just fade all the time, we’ll define an inbetween step, which we’ll set at half of what we calculated, i.e. 8%. That’s the point that we want to show the image completely and we only want to start fading it out at 17%, making it disappear completely at 25%.

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

We have the same reasoning for the title, just that we want it to disappear a bit quicker, hence the opacity 0 at 19%:

@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

For browsers that don’t support animations, we’ll simply show the last slideshow image by setting the opacity of the span to 1:

.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

The no-cssanimations class is added by Modernizr.

Let’s as well take care of the title’s font size when the viewport is smaller. We’ll use media queries in order to set the font size smaller at specific widths:

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}

And that’s all for the simple version of the slideshow! Now, let’s see how we can spice up the transitions a bit.

Alternative animation example

Now, we can play a bit with the animations for showing the images and their titles.

The following animation will make the image scale up a bit and rotate it slightly:

@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1) rotate(3deg);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.1) rotate(3deg);
	}
	100% { opacity: 0 }
}

The title will slide in from the right (we’ll have to change the text-align for the title division to “right”), and disappear by sliding to the left and fading out:

@keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    transform: translateX(200px);
	}
	8% {
	    opacity: 1;
	    transform: translateX(0px);
	}
	17% {
	    opacity: 1;
	    transform: translateX(0px);
	}
	19% {
	    opacity: 0;
	    transform: translateX(-400px);
	}
	25% { opacity: 0 }
	100% { opacity: 0 }
}

There are many possibilities for the image and title transitions, just experiment!

Demos

Here you can find some demos with alternative animations:

  1. Demo 1: Simple Fade in, fade out
  2. Demo 2: Slight rotation, title slides from the right
  3. Demo 3: Image moves up, title moves down
  4. Demo 4: Image scales, title moves up, scales and fades out

Currently, the animations are smoothest in Webkit broswers like Chrome and especially Safari.

I hope you enjoyed this tutorial and find it useful and inspiring!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 150

Comments are closed.
  1. Simply incredible! With stuff like that is when i wonder why IE is still alive…
    CSS3 not supported in all browsers is a real pain.

  2. Wonderful demo, but on Mac it’s very choppy on FF and it flat out kills Chrome. ON safari it’s smooth as butter though 馃檪

  3. Hello,
    I love your code! it is a great feature that I implement for my homepage, please check it out: http://www.qdesign.fr.

    I have a question, I try to run it with IE8, it doesn’t work at all, not even the no-cssanimation version (which works on mobile browser by the way).
    Am i missing something for IE?
    Any thoughts ?

    thanks,
    Regards,
    Jean Jacques

  4. hello,

    I’ve got a problem i hope you can help me with! how can i stop the background resize but still keep it absolut centered and aligned to the top?

    Thx!

  5. Brilliant!! I really wish IE would jack up their system and get UP-TO-DATE with the new css rules and animations.

  6. You have -o- rules in the animation, but opera does not have any animation, and as far as I am aware, are not planning to ever support it.

  7. Love this effect! I only wish that it is fully supported by all browsers. It amazes me how much IE can sometimes slow the progress of CSS advancement.

  8. It works perfectly in Firefox 9.0.1 馃檪

    This site is amazing. Only just started to work with CSS i need to learn more now 馃榾

  9. Mary Lou, i am a big fan of your work and thanks fot this one. I am trying to implement it on my project.

  10. Hi, this site awesome, ive been learning lots.

    What about if i wanted just a static fullscreen image with the pattern png on top, how could i do this?

  11. Hi,

    The animation doesn’t works on Op茅ra and we don’t see the text.
    Did you know how change this problem ?

    Thanks a lot

  12. Hi Mary,

    My few words….

    IE users seem to view only the last picture of the slide show while some experience 1 sec presentation of all before get to the last picture…

    Safari 5.0.6 is compatible ONLY with DEMO1 …while the upgrade 5.1.2 is with all … *havent tested with Opera….

    Its very good and I wish there is a fix for IE!

  13. Hi,
    It would ne perfect if it would work on Firefox and internet explorer :(((( How to solve this pleeeeaaassee !??

    Thank you so much 馃檪

  14. Greate Tutorial and Goode effort.
    Can you Guide me how to add more that 6 Slides in the script..
    I need to add more slides and would like to know the changes i need to do.

  15. This is absolutely the hammer. That was until a few years ago only with Flash beach. Really impressive. I love something like this

  16. hi, i have some problems, 1st is animation doesnt work in opera (lates version) and i dont see texts, 2nd i think javascript crashs in internet explorer (tried every version) animation doesnt work, texts nest, i tried many computers but results are the same (host solution is BlueHost), but it works great in localhost with safari and firefox (localhost Xampp and the OS is Mac OS Lion).

  17. Fantastic tutorial. Is there a way to add more than just 6 background images?

  18. @Mary Lou thanks for this awesome tutorial, it’s just what I was looking for.

    for those of you who wonder how to add more images, here’s how it done:
    to add more images open styles1.css :
    update the seconds accordingly in the .cb-slideshow li span { section (add another 6 seconds to the total of 36)
    and add another block after the slideshow blocks:
    i.e. image #7 would look like this:
    .cb-slideshow li:nth-child(7) span { background-image: url(images/7.jpg); -webkit-animation-delay: 42s; -moz-animation-delay: 42s; -o-animation-delay: 42s; -ms-animation-delay: 42s; animation-delay: 42s; }

    and don’t forget to add one for the title #7
    .cb-slideshow li:nth-child(7) div { -webkit-animation-delay: 42s; -moz-animation-delay: 42s; -o-animation-delay: 42s; -ms-animation-delay: 42s; animation-delay: 42s; }

    next open index.html and add one more to the list
    Image 07title路for路#7
    Save everything, add a seventh image in the images folder, call it 7.jpg and voil脿.

  19. The downloaded sample file does not work in internet explorer 8 when ran locally. But your demo displayed well online. Any reason why? Please help, because I’m in love with it.

  20. Pls how can I reduce the images to three or four? Please help I’m find it difficult

    • it really isn’t that difficult. Open the css file and under the .cb-slideshow li span { and .cb-slideshow li div { section adjust the total seconds for the duration of the slideshow from 36s to a total of 24s (for 4 images with 6 seconds) – then you remove the two code blocks for the images .cb-slideshow li:nth-child(5) span { and .cb-slideshow li:nth-child(6) span { , and then the two code blocks for the text animation .cb-slideshow li:nth-child(5) div { and .cb-slideshow li:nth-child(6) div { .
      Next open up the html file. Here you’d have to remove the lines for images 5 and 6 in the section:
      Image 05com路po路sure
      Image 06se路ren路i路ty
      and that should do it.
      Hope that helps 馃槈

  21. Firefox ok – Chrome ok – Safari ok – Opera ok
    It鈥檚 not work in IE 9 馃檨

    Please help me !

    • as far as I know there’s no fix for it unless microsoft implements full css3 support in their browsers… you might be able to find a workaround with javascript transitions – just google it. Good luck

  22. i have 18 images in the slideshow but i can see the slideshow start over in the background after the 6th image.
    can you please help me with this. i’d greatly appreciate it.

    here’s an example of the problem: werunthisonline.net

    • your site works perfectly in firefox 10. I didn’t count all background images but it looks like there’s all 18 showing.

  23. all 18 are showing but i can see the slideshow start over in the background after the 6th image.
    For example, on the 7th image i can see traces of the first image. On the 8th image i can see traces of the 2nd image. On the 9th image i can see traces of the 3rd image and so on…

  24. I Love this!

    What would be the easiest way to just have one image fade in and it stay at that image?

    Sharing this around 馃檪

    Thanks!

  25. i’ve been working on it as individual file..with using index 2 html, but the images and the slideshow wont come out.. can anyone help me, please?? thx..

  26. Is there a way of using only one background? Like having a fullscreen background without it having the slideshow?

  27. Thanks much for this. In the browsers where it works, it works great. Is there a way to use MORE than 6 images? I tried increasing the nthchild and adding ‘s in the html, but no luck. Thanks in advance.

    Michael

  28. i dont no if anyone else has experienced this but rendered out in safari and iv got more then 10 images and it pre loades image 10 in place of image 2. Works fine in FF but in safari it causes a few problems.

  29. all 18 are showing but i can see the slideshow start over in the background after the 6th image.
    For example, on the 7th image i can see traces of the first image. On the 8th image i can see traces of the 2nd image. On the 9th image i can see traces of the 3rd image and so on鈥LEASE HELP

  30. This is a great tutorial for a full background image slideshow. I haven’t many tutorials on this topic that work well. I noticed the images get cropped a bit a the tops and bottom. Is it possible to avoid this crop to show 100% of the image area?
    cordially,

  31. Hi there, i am just starting to learn webdesign and love this effect but I was just wondering how to put a fixed list item (my menu bar) over the top? Every time i try it fades with the background.

    Apologies for the potentially stupid question, im new to this.
    Any help much appreciated

    Thanks

  32. @Michael Wassil read previous comments, it’s all been covered!

    @jDucksey
    here’s a hint: move the code for your menu bar outside (before) the div that contains the instructions for the slide in the html file

  33. Great Tutorial, as always!
    I’ve a problem, like Mario, i’ve 17images to show, but on the 7th image i see the 1st image, when turns on 8th image i see also the 2nd image.
    How we can change the timing of the animation?
    I have changed the total time from 36s to 102s (6s x 17images) and i’ve changed the % of the animation, but it still don’t work properly!
    Anyone have an idea for fix it????
    Thanks in advance!

    Sabrina

  34. Hello — thank you for this tutorial.

    I had a question. I turned this into a featured slider for WordPress using custom fields to populate content on each separate slide. Here’s a glimpse of the code:

    <span style="background-image: url('ID), array( 905,400 ), false, '' ); echo $src[0]; ?>');"> ID, "h1", true); ?> ID, "h2", true); ?> ID, "h3", true); ?> ID, "h4", true); ?> ID, "button", true); ?>

    The button custom field includes a linked image such as:

    <a href="URL" rel="nofollow"></a>

    I have three of the six slides with a linked image (generally in the same area with slight displacement based on content). Something that I have run into is that I’ll be on the first slide but I am able to click the links from slides 3 and 5.

    Is there anyway to ensure that the only link that is clickable is the current slide?

    Is it a z-index issue?

    Thanks for any help. I am working on a site for a client and appreciate any insight.

  35. Hi..it’s kind of works ready!! 馃檪 but there’s a little bit problem here…( ; – ; )
    The image slideshow works perfectly on chrome and mozilla as well..
    but the text seems to be appear overlapping to one and another at the first 10s, then its works perfectly at the end…
    Can anyone tell me why?? Can anyone help me to fixed the overlapping text problem?

    notes: its doesn’t work at all on IE..

    Thx…