Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

changing background image using javascript

Featured Replies

hi guys can anyone tell me how to change my background image using javascript? i want to it to change every 10 seconds or so to another one

 

people have given me links to sites but the code it gives isnt working for some reason

 

thanks guys

Hi,

 

What are the links that people have you given? Why the code isn't working? I guess it must be very simple code.

  • Author

Hi,

 

What are the links that people have you given? Why the code isn't working? I guess it must be very simple code.

i got this given to me yeaterday but i put the code where it says to it doesnt work, this one changes everytime you refresh which i dont want, i would like it to change automatically while your still on the page

 

My link

That's some pretty ancient code there, but it basically does the job. The main script (the one in the top box) needs a bit of tweaking to get it into a seperate function... and to remove the cloaking device (they're just pointless these days):

<script type="text/javascript">

function randomImage() {

   // Start by making the array of images so that we can get the length afterwards
   var images = [
       "zebra.jpg",
       "tiler3.jpg",
       "wicker3.jpg",
       "aaa4.jpg"
   ];

   // Make a random number based on the size of the array.
   // Here I've put the Math.random() function straight in and I've subtracted 1 from the final result.
   // That's because the array has 4 entries, but they're 'zero indexed', meaning the entries are images[0], images[1], images[2] and images[3]
   var rand1 = Math.round(Math.random() * images.length) - 1;

   // Now we change the background image of the body tag to the random image.
   document.body.style.backgroundImage = images[rand1];
}


// Now we need another function to call out first function every 10 seconds
// The setInterval() function uses milliseconds, so 10 seconds is 10,000 miliseconds
function backgroundChanger() {
   setInterval(randomImage, 10000);
}
</script>

 

Now, just add that second function to the body tag -- but don't use document.write to do it!

<body onload="backgroundChanger">

 

And that should do it

  • Author

thanks very much mate ill give it a go

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.