How to change image-background after sometime?

HI everybody

i need to know if there are a way to change the background image after a specific time like 10 sec or 30 sec…etc.
you know like yahoo Login mail “it’s changing the background daily!!”

if there is a way using JQuery or CSS or html or any other thing ,please tell me

Contents hide

Answers:

Method 1

Method 2

Method 3

Method 4

Method 5

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

you can make it with javascript function

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
    //change the image
    if(!imageID){
        document.getElementById("myimage").src="https://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID++;
    }
    else{if(imageID==1){
        document.getElementById("myimage").src="https://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID++;
    }else{if(imageID==2){
        document.getElementById("myimage").src="https://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='300px' height='250px' id='myimage' src='https://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body></html>

try this one! 🙂

Method 2

You could probably achieve it using CSS3 webkit animations but the trade off is it will only work in the likes of Chrome and Safari but you won’t require any JavaScript at all.

The jQuery suggestion above is your best bet here I guess.

Method 3

You could use javascript’s setTimeout or setInterval to do this, or look into JQuery’s Timers

EDIT:
With JQuery, this will change the background after 1 sec:

$(window).oneTime(1000, function() {
    // change your background image here
  });

Method 4

You could do it with a function and setTimeout:

function changeBG()
{
    var body = document.getElementsByTagName("body")[0];
    body.style.backgroundImage = "url(myimage.gif)";
    setTimeout("changeBG",30000); // Change every 30 seconds
}

window.onload = changeBG;

(untested so it might need a tweak or 2)

Method 5

If you’re using the Prototype library:

var changeBackground = function() {
   $$('body').first().setStyle({
      backgroundImage: 'newImage.jpg'
   });
};
changeBackground.delay(15);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating