change background image every 15 sec

Question

hello,
I have a page with a background on the background I set in the css file.I want to change itevery 15 sec.
I have 2 images: 1.jpg and 2.jpg . my css looks like this

.slide1 {
    max-width: 100%;
    background-attachment: fixed;
    width:100%;
    height: 100%;
    padding-top: 3em;
    position: relative;
    background-color: #FFFFFF;
    background-image: url('billede/1.jpg');
    background-size: auto 70%;
    color:#FFFFFF;
    background-repeat:no-repeat;
    background-position:bottom center;
    margin: 0;
}

and this is what makes the background change:

<script>
    var arrayOfImages = new Array("billede/green/1.jpg","billede/green/2.jpg");

    $(arrayOfImages).each(function () {
    $('<img />').attr('src',this).appendTo('body').hide;
    });

    setInterval(function(){$(".slide3").css("background-image", "url('billede/green/" + parseInt((Math.random()*2)+1) + ".jpg')");},10000);
</script>

but right now when it changes picture, it shows a white background when I start scrolling the background shows. What can I do to change the background without it showing the white background sometimes?

Answer 1

You can do this with Simple HTML and CSS.

Create a HTML Div, Each div set a class of your Image Background CSS

<div class="x a"></div>
<div class="x b"></div>
<div class="x c"></div>

Set Size to 100% and z-index to your prefer position CSS:

.x {
  background-image:url(image file);
  display: inline-block;
  animation: fade 1s forwards;
  -webkit-animation: fade 1s forwards;
  -moz-animation: fade 1s forwards;
  -o-animation: fade 1s forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;  
  -o-animation-iteration-count: infinite;
}


.b 
{
  background-image:url(image file);
    animation: fade 2s forwards;
  -webkit-animation: fade 2s forwards;
  -moz-animation: fade 2s forwards;
  -o-animation: fade 2s forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;  
  -o-animation-iteration-count: infinite;
}
.c 
{
  background-image:url(image file);
    animation: fade 3s forwards;
  -webkit-animation: fade 3s forwards;
  -moz-animation: fade 3s forwards;
  -o-animation: fade 3s forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;  
  -o-animation-iteration-count: infinite;
}


@keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}
}

@-webkit-keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}
}

@-moz-keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}
}

@-o-keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}
}

Answer 2

This is probably because it takes some time to load the new background picture. To have the new background appear instantly you need to preload it.

See this question for a good way to do it: JavaScript Preloading Images