Instead of implementing a slider plugin, I'd like to use CSS/jquery to alternate background images of a DIV (fadein/fadeout or slide effect). Currently my code is as below:

HTML

<div class="block backpic">
</div>

CSS

.block {

    display: block;
        margin-right: auto;
    margin-left: auto;
    clear: both;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    overflow: hidden;
}


.backpic {
    height: 638px;
    background-image: url(../images/picture1.jpg);
    background-size: cover;
}

What should I do to alternate picture1 with a second picture? Many thanks for your help

Instead of implementing a slider plugin, I'd like to use CSS/jquery to alternate background images of a DIV (fadein/fadeout or slide effect). Currently my code is as below:

HTML

<div class="block backpic">
</div>

CSS

.block {

    display: block;
        margin-right: auto;
    margin-left: auto;
    clear: both;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    overflow: hidden;
}


.backpic {
    height: 638px;
    background-image: url(../images/picture1.jpg);
    background-size: cover;
}

What should I do to alternate picture1 with a second picture? Many thanks for your help

• javascript
• jquery
• html
• css

• Good point, have edited the code. Thanks – Greg Commented Sep 29, 2013 at 21:30

3 Answers 3

Use jQuery to fade the element out, than change it's background-image property, then fade back in again:

$('.block').fadeOut(300, function(){

  $(this).css('background-image', 'url(path/to/other/image.jpg)')

  $(this).fadeIn(300);

});

If you're wanting a slideshow-like cycling of the animation, use a JavaScript setInterval method to have the code repeat itself after a certain number of milliseconds:

var images = [

  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg'

];

var index = 0;

setInterval(change_up, 1000);

function change_up(){

  index = (index + 1 < images.length) ? index + 1 : 0;

  $('.block').fadeOut(300, function(){

    $(this).css('background-image', 'url('+ images[index] + ')')

    $(this).fadeIn(300);

  });
}

Here's an example

try using even and odd selectors

    .block:nth-child(odd) {
background-image:
 height: 638px;
    background-image: url(../images/picture1.jpg);
    background-size: cover;
}

.block:nth-child(even) {
background-image:
 height: 638px;
    background-image: url(../images/pictureNew.jpg);
    background-size: cover;
}

have a core slider class

.slider{
   opacity:1
   -webkit-transition:opacity 500ms;
   -moz-transition:opacity 500ms;
   -ms-transition:opacity 500ms;
   transition:opacity 500ms;
}

.hideSlide{
   opacity:0
}

This will cause the fade of opacity. Then you can change your opacity with the hide slide class and when it is transparent change the background image. Then remove the hide slide class and it will fade back in.

Alternatively you could have a bunh of divs laid on top of one another fading out at increasing lengths 500ms 1000ms, 1500ms etc. to expose them to the viewer.