CSS background-image slideshow

Question

I am pretty new to CSS and HTML, but I am learning the ropes. Right now, I have a background image on my header section and I am trying to turn this into a slideshow with 3-4 images shuffling through on a timer.

I have seen some tutorials that use images through HTML, but the way I have set it up is I have my CSS property background-image set as my image.

If this doesnt make sense, here is the CSS

.global-header {
    min-height:600px;
    background-image: url("Assets/BGImages/head_sandwichman.jpg");
    background-size: cover;
    text-align: center;
}

and the HTML

<header class="container global-header">
    <div class="inner-w">
        <div class='rmm' data-menu-style = "minimal">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="menu.html">MENU</a></li>
                <li><a href="findus.html">FIND US</a></li>
                <li><a href="about.html">ABOUT</a></li> 
           </ul>
        </div>
    <div class="large-logo-wrap">
        <img src="Assets/Logos/Giadaslogoindexwhitebig.png" />
    </div>
</div>

Thanks for the help!

Use http://stackoverflow.com/questions/7777159/clip-crop-background-image-with-css with @keyframes — bjb568, Mar 10 '14 at 04:50
`window.setTimeout(function() { $('header.global-header').css('background-image', 'url(....)')});`, basically — Marc B, Mar 10 '14 at 04:51
For all you suggesting jQuery: A jQuery answer is off-topic for this question because this is a [tag:css] question, and is tagged a such. — bjb568, Mar 10 '14 at 04:53
@bjb568, I am sorry if I was unclear, but the answer does not have to be witin the realm of CSS. I am just looking for a solution. — user3342697, Mar 10 '14 at 05:10
@bjb568, can you please take away your -1 from pratik and switch it to me, it was my fault. — user3342697, Mar 10 '14 at 05:26
@user3342697 That's not necessary, because this _is_ a CSS question, totally possible with CSS alone. — bjb568, Mar 10 '14 at 05:35

score 23 · Accepted Answer · edited Jun 20 '14 at 08:57

23

Use following

 <script>
//Array of images which you want to show: Use path you want.
var images=new Array('Assets/BGImages/head_sandwichman1.jpg','Assets/BGImages/head_sandwichman2.jpg','Assets/BGImages/head_sandwichman3.jpg');
var nextimage=0;
doSlideshow();

function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('.global-header')
    .css('background-image','url("'+images[nextimage++]+'")')
    .fadeIn(500,function(){
        setTimeout(doSlideshow,1000);
    });
}
</script>

edited Jun 20 '14 at 08:57

T30

11,422
7
53
57

answered Mar 10 '14 at 04:54

Pratik Joshi

11,485
7
41
73

this works! but my menu becomes lost.. and my logo gets pushed down with this solution @Pratik, any further help? – user3342697 Mar 10 '14 at 05:16
Try using $('.global-header').append Instead of => $('.global-header').prepend – Pratik Joshi Mar 10 '14 at 05:22
I apologize @Pratik, I had no idea you had to be so specific. I will make sure to give you the point for all your extra help. That $('.global-header').append keeps everything stable and stays within my div, but it doesnt slide through all my images anymore. – user3342697 Mar 10 '14 at 05:26
So prepend is working ok ? provide your current code in jsfiddle – Pratik Joshi Mar 10 '14 at 05:27
Hey man, It works! BUT the only problem is... its not spanning my entire background and it made my menu and nav bar disappear – user3342697 Mar 10 '14 at 05:57
Ok so ,your menu go backwards and Disappear ,and image comes in front of menus and only image is shown ,correct? – Pratik Joshi Mar 10 '14 at 05:58
YUP! and for some reason it is not in my background, but in my inner div. – user3342697 Mar 10 '14 at 06:05
@PRATIK THANK YOU SO MUCH!!! It worked great! Can I point you over to my other question? It would be highly appreciated, as they are similar. I am trying to give you a point(+1), but it says I need 15 reputation points to give you +1. Trust me I will give you more then +1 when I get the points. Here is the link to the other question if you can help I would be forever gratefulhttp://stackoverflow.com/questions/22293523/review-slider-using-css-html-and-or-jquery-or-java – user3342697 Mar 10 '14 at 06:39
http://stackoverflow.com/questions/22293523/review-slider-using-css-html-and-or-jquery-or-java – user3342697 Mar 10 '14 at 06:41
@pratik can you tell me how to make the word "clickbtn" and "clickbtnback" into arrows – user3342697 Mar 11 '14 at 00:54
@PratikJoshi I don't see any difference when removing `fadeIn` or increasing its value... Is it only my problem? – T30 Jun 20 '14 at 09:18
@T30 , fadeIn,fadeOut is used to apply Cool effects more than just Hide and Show. http://api.jquery.com/fadein/ http://api.jquery.com/fadeout/ . Did you also have same Question regarding image Slideshow in background? :) – Pratik Joshi Jun 20 '14 at 09:34
@PratikJoshi Yes, I've implemented your code on my page, but I can't see the fade effect (also increasing its value)... – T30 Jun 20 '14 at 09:40
Please post your code on jsfiddle.com , lets solve it. – Pratik Joshi Jun 20 '14 at 10:40
@PratikJoshi Thanks 4 the patience: in this [**fiddle**](http://jsfiddle.net/5fVZ7/6/) there's no difference increasing or removing `fadeIn` value. – T30 Jun 20 '14 at 13:00
If you add `transition: background 1s linear;`, then the fade will work (using CSS3 that is). See: http://stackoverflow.com/a/23166600/922323 – mhulse Jul 01 '15 at 18:03
1

it needs @mhulse addition in order to make it work properly with fade effect. – Omar Abdirahman Jan 08 '19 at 13:26
When I use this code the images initially take very long to show. Only after loading all images once does the slideshow run seamlessly. So if your images are more than 300KB the slideshow images should first be loaded as div's within the document before accessing them. Does anyone know of a better way to load large images? – Hmerman6006 Mar 31 '20 at 20:16

score 10 · Answer 2 · edited May 23 '17 at 12:02

Made modifications to this answer.

http://jsfiddle.net/qyVMj/

#graphic:before {
    content: '';
    position: absolute;
    width: 400%;
    height: 100%;
    z-index: -1;
    background: url(http://placekitten.com/500/500/) repeat; /* Image is 500px by 500px, but only 200px by 50px is showing. */
    animation: slide 3s infinite;
}
@keyframes slide {
    20% {
        left: 0;
    }
    40%, 60% {
        left: -50%;
    }
    80%, 100% {
        left: -100%;
    }
}

Bascially, just make your image into a sprite (combine them into 1 file), then use left: to cycle thru them. (Of course modify the left and percent values to your liking)

mhulse · Answer 3 · 2015-07-01T19:13:54.863

Based on the accepted answer for this question, here’s a jQuery-dependent version that creates a random image slideshow, uses CSS3 for the transition and gets the image paths via HTML5 data attribute.

Demo: https://jsbin.com/luhawu/1

Note: All images should be same dimensions for best results.

JS:

(function($) {

    'use strict';

    var $slides = $('[data-slides]');
    var images = $slides.data('slides');
    var count = images.length;
    var slideshow = function() {
        $slides
            .css('background-image', 'url("' + images[Math.floor(Math.random() * count)] + '")')
            .show(0, function() {
                setTimeout(slideshow, 5000);
            });
    };

    slideshow();

}(jQuery));

Minified:

!function(t){"use strict";var a=t("[data-slides]"),s=a.data("slides"),e=s.length,n=function(){a.css("background-image",'url("'+s[Math.floor(Math.random()*e)]+'")').show(0,function(){setTimeout(n,5e3)})};n()}(jQuery);

CSS:

[data-slides] {
    background-image: url(../../uploads/banner1.jpg); /* Default image. */
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transition: background-image 1s linear;
}

/* Use additional CSS to control the `height` of `[data-slides]`, like so: */

.test { height: 220px; }
@media all and (min-width: 48em) {
    .test { height: 320px; }
}

HTML

<div
    class="test"
    data-slides='[
        "uploads/banner1.jpg",
        "uploads/banner2.jpg",
        "uploads/banner3.jpg",
        "uploads/banner4.jpg",
        "uploads/banner5.jpg",
        "uploads/banner6.jpg",
        "uploads/banner7.jpg",
        "uploads/banner8.jpg",
        "uploads/banner9.jpg"
    ]'
> … </div> <!-- /.primary -->

I’ve also put the code in a public Gist.

score 1 · Answer 4 · answered Mar 28 '17 at 11:05

<html>
<head>
    <style>
        body {
            background-image: url(1.png);
            background-size: 99% 300px;
            background-repeat: repeat-x;
            animation: slideLeft 5s linear infinite;
            background-position: 0% 100%;
        }

        @keyframes slideLeft {
            to {
                background-position: 9900% 100%;
            }
        }

        @-moz-keyframes slideLeft {
            to {
                background-position: 9900% 100%;
            }
        }

        @-webkit-keyframes slideLeft {
            to {
                background-position: 9900% 100%;
            }
        }
    </style>
</head>
<body>
</body>
</html>

CSS background-image slideshow

4 Answers4

JS:

CSS:

HTML

Linked