0

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;
}
fun123
  • 1
  • 4
  • I tryed adding id's to image class, and thats all i could think of to be honest, i really cant imagine any solution for it. Of course it could be done by adding sub-classes or adding images into image class as content, but i would like to do it just by altering image class if possible – fun123 May 22 '14 at 23:24

2 Answers2

0

You can use sibling selectors.

.box .image{ 
    background: url('1.jpg') no-repeat center fixed; here 
    /* all the rest of the default/shared css */
}
.box + .box .image { background-image: url('2.jpg');}
.box + .box + .box .image { background-image: url('3.jpg');}
.box + .box + .box + .box .image { background-image: url('4.jpg');}

Note that the 2nd selector will actually apply to 2-4 but the subsequent selectors will override it. That's because the third .box also matches .box + .box but .box + .box + .box is more specific so it wins.

Or you can use :nth-child selectors.

.box .image{ 
    background: url('1.jpg') no-repeat center fixed; here 
    /* all the rest of the default/shared css */
}
.box:nth-child(2) .image { background-image: url('2.jpg');}
.box:nth-child(3) .image { background-image: url('3.jpg');}
.box:nth-child(4) .image { background-image: url('4.jpg');}

Here's a fiddle with a few examples.

Will
  • 4,075
  • 1
  • 17
  • 28
0

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

Community
  • 1
  • 1
fun123
  • 1
  • 4