CODEWITHSUNDEEP
css
Saumya Ranjan Satapathy
Saumya Ranjan Satapathy

Reputation: 145

change background dynamically by using only css

IS there a way to change background dynamically by using only css.

My background images are not fixed. I am setting the style from JS like

var background = '';
//backgroundForCurrUser is an array of URL coming from server
for(var x in backgroundForCurrUser) 
{
   background += 'url('+ backgroundForCurrUser[x]+ '),';
}
background = background.substring(0,background.length-1);

var element = document.getElementById("myDashoboard");
element.style.setProperty('background', background );

<div id="myDashoboard"><div>

Is there a way that I can slide show the background images with css with one image at a time and irrespective of the number of images?

Upvotes: 2

Views: 824

Answers (1)

Temani Afif
Temani Afif

Reputation: 272787

As @zevee commented, you may use CSS animation on background-image property, here is an example :

@keyframes change {
    30%   {background-image: url(https://lorempixel.com/400/400/);}
    50%  {background-image: url(https://lorempixel.com/400/400/);}
    80% {background-image: url(https://lorempixel.com/400/400/);}
}

.myDashoboard {
   background-image: url(https://lorempixel.com/400/400/);
    width: 400px;
    height: 400px;
    background-size:cover;
    position: relative;
    animation: change 5s linear 1s infinite;
}
<div class="myDashoboard">

</div>

Upvotes: 2

Related Questions