Skwolven

nevermind! I got it to work by taking the image out of the banner and setting background properties with CSS. I've seen some other folks struggling with this so here's what worked for me:

CSS

#page{
  background: #cacaca;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
}

-style your background however you want. I like the parallax effect and added an overlay so the text on top would stand out more

footer code injection:

<script type="text/javascript">

    var images = ['image.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];              
    document.getElementById("page").style.backgroundImage = 'url(" ' + images[Math.floor(Math.random() * images.length)] + '")';
</script>

-you'll have to find the urls for your images and replace image.jpg above with the full url, and replace "page" with whatever your page id is.

good luck!

Site URL: https://fredfilms.com

Hi,

My website has a scrolling index/homepage with multiple 'blank' pages nested. I added a banner image to the top page with a text overlay and would like that banner image to randomly load each time someone visits the page.

Any help would be greatly appreciated!