CODEWITHSUNDEEP
javascripthtmlcss
user1437595
user1437595

Reputation: 3

change background image every 15 sec

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?

Upvotes: 0

Views: 305

Answers (2)

user1593931
user1593931

Reputation:

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

Upvotes: 1

MasterScrat
MasterScrat

Reputation: 7366

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

Upvotes: 0

Related Questions