By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Auto background image in JS


I haven't begun writing any code for this. I'd like to ask for insight on the best way to do this. I want to create an auto background image change on a webpage. I'd like to do this with the most basic approach first. Then, I can learn from that and perhaps implement other JS. I think I understand using/needing setTimeout/setTimeInterval (for changing the image per set time intervals). If this is incorrect, please guide me. Also, I think the best way to invoke the images (multiple) is using an array? I want to do it using different events like onload (page opening/refreshing) then, maybe using a button to kick off the script. Any help is much appreciated! Thanks! =).

This should be a good place to start at with your task HTML DOM Style background Property

Thanks! I came up with the following code and want someoe to validate it as normal/standard/correct way of doing this. I didn't know how to remove the image and revert back the background color I have in page so, I used the two statements you see. It worked removing the image and setting the color again. Next, what's the best way to add multiple images from the button click event? Appreciate the help! Thanks! =).


<button type="button" id="b2" onclick="chBack()">Change page background to an image</button>  
<br><button type="button" id="b3" onclick="changeBack()">Change back</button>


function chBack() {
    document.body.style.background="url('_.jpg') no-repeat center top";

function changeBack() {
Last edited by a moderator:
Thanks for the validation, EkBass! As for multiple images (onclick), it would basically be different images loading per a click event. Eventually, I want to make this auto change. Say, for example, designing a gaming/gamer website and as a related effect, while visitors navigate the site, per set time intervals the backround image on site changes to different gaming images. Eventually stopping of course, or just setting it to a limited amount of images and have those change repeatedly. It's sort of like designing an image scroller or other effects that load multiple images/backgrounds. I don't quite know where to begin with this. I'm guessing maybe an array to hold the images. Followed by whatever statements to load them from a click event. Appreciate the guidance! Thanks! =).

New Threads

Buy us a coffee!

Top Bottom