How to create slideshow in css without having to make more than one class?


Tags: html5,css3,animation

Problem :

Okay, so my question is, how do i make css slideshow within one class, without having to add any sub-class or any content into the div its self? I just want to use background property in css if that's possible. Code is at the end of post, i would like if i could make background on div "image" to slide. Thanks in advance.

Let me edit question a bit, i will have 12x6 grid of boxes on the page, and i need all of those 72 boxes to change background at same time, but with positioning to look like its all one big continues background that lays over all of those boxes but doesn't lay on body, so i get like mosaic effect.

<div class="wrapper">
    <div class="box"><div class="image"></div></div>
    <div class="box"><div class="image"></div></div>
    <div class="box"><div class="image"></div></div>
    <div class="box"><div class="image"></div></div>
</div>



.image{
    background: url('http://goo.gl/mZc5Ai') no-repeat center fixed;
    position:absolute;
    float: none;
    background-size:100%;
    width:100%;
    height:100%;
}
.box {
    width:140px;
    height:140px;
    float:left;
    margin:10px;
    position:relative;
}


Solution :

Since i found no solution that works for me using css, i used jquery, this is the code i used:

 $(document).ready(function () {
            var img_array = ['bg2.jpg' , 'bg1.jpg'];
            var index = 0;
            var interval = 10000;
            setTimeout(function () {
                $('.image').css('backgroundImage', 'url(' + img_array[index++ % img_array.length] + ')');
                setTimeout(arguments.callee, interval);
                $('.image').each(function (index) {
                    $(this).hide();
                    $(this).delay(30 * index).fadeIn(2000);
                });
            }, interval);
        });

thanks to original answer at: Change the body background image with fade effect in jquery


    CSS Howto..

    How to prevent mobile device to resize and use proper css file

    How to parse CSS font shorthand format

    How do I create a full screen click target to work with CSS-only navigation menu with :target?

    Understanding how CSS clear:both is supposed to work

    How to create image curved using css or jquery (See picture)

    How to Minify CSS to its Absolute Minimalistic Essence?

    How to use different kind of Google Font types?

    How do I use CSS transformations to slide a div on screen?

    CSS : How to add an absolute div to a scrollable background? [closed]

    How to get row of floated images inside a div element to resize with browser window

    How to set background color for a boxed link?

    How to debug CSS when using GWT

    How to set dynamic value in css? [closed]

    how to use css button to post method in a form?

    How do I implement responsive design into my CSS when I have two spans, side by side?

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to draw image dynamically on a canvas line between two cells

    how to pass jquery variable value into css property value?

    How to add font awesome in CSS

    How to vertically center an HR element

    CSS : How can I add shadow to a label or box

    CSS - How to avoid element content to be displayed on 2 lines

    How to get and extract matched css rules on dom-node?

    How can I use a `comment` fa-icon and a text div to display the number of messages a user has?

    How can I improve this mobile site? [closed]

    How to set Height of a table in a Bootstrap as the value of Width using CSS?

    How to differentiate between two class of same name in different css on same page

    How to add a .css to a .cshtml

    How to merge .CSS files with Sass (or other tool)? [duplicate]

    How to Create Grid/Tile View with CSS?