Jump to content

Random Background code


Sean_M

Recommended Posts

I couldn't decide on a single background for a page theme, so here's some simple code that'll allow random backgrounds on different page visits. (or refresh). Thought it might be useful for someone, improve and adapt it to your needs :-)

<script type="text/javascript">
  
  <!--Find the path to your images under site assets by using the Inspect feature on a browser. /file/asset/...-->
  var images = ['image_1_path', 'image_2_path'];
  
  <!--Find class name for the div that holds your background, may differ template to template. Put in below brackets-->
  document.getElementsByClassName('ui-theme-basicnavigation-container theme-container os-background-fill-important')[0].style.backgroundImage = 'url(' + images[Math.floor(Math.random() * images.length)] + ')';
</script>

One thing to note, the HTML widget only runs once, at page load, so if you navigate around the menu and go back to a page you've already visited, it will go back to the default theme image you've chosen in the editor.

But it's good for single pages etc. And you can add the code to all pages in your menu.

 

Demo attached (refreshing triggers a new background)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...