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!

Solution 1

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>

Solution 2

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)

Solution 3

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.

Solution 4

<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>

View more solutions

Comments

[user3342697]

this works! but my menu becomes lost.. and my logo gets pushed down with this solution @Pratik, any further help?

[Pratik]

Try using $('.global-header').append Instead of => $('.global-header').prepend

[user3342697]

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.

[Pratik]

So prepend is working ok ? provide your current code in jsfiddle

[user3342697]

Hey man, It works! BUT the only problem is... its not spanning my entire background and it made my menu and nav bar disappear

[Pratik]

Ok so ,your menu go backwards and Disappear ,and image comes in front of menus and only image is shown ,correct?

[user3342697]

YUP! and for some reason it is not in my background, but in my inner div.

[user3342697]

@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-s‌​lider-using-css-html‌​-and-or-jquery-or-ja‌​va

[user3342697]

stackoverflow.com/questions/22293523/…

[user3342697]

@pratik can you tell me how to make the word "clickbtn" and "clickbtnback" into arrows

[T30]

@PratikJoshi I don't see any difference when removing fadeIn or increasing its value... Is it only my problem?

[Pratik]

@T30 , fadeIn,fadeOut is used to apply Cool effects more than just Hide and Show. api.jquery.com/fadein api.jquery.com/fadeout . Did you also have same Question regarding image Slideshow in background? :)

[T30]

@PratikJoshi Yes, I've implemented your code on my page, but I can't see the fade effect (also increasing its value)...

[Pratik]

Please post your code on jsfiddle.com , lets solve it.

[T30]

@PratikJoshi Thanks 4 the patience: in this fiddle there's no difference increasing or removing fadeIn value.

[mhulse]

If you add transition: background 1s linear;, then the fade will work (using CSS3 that is). See: stackoverflow.com/a/23166600/922323

[Omar Abdirahman]

it needs @mhulse addition in order to make it work properly with fade effect.

[Hmerman6006]

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?