New landing page background image on each refresh/new page load?

Design help Layout & Design
1

Hi everyone !

I am working for a company who wants to use 6 or 7 images on their landing page, ie each time a user opens/refreshes/loads the page they would get a different background image.

Is this possible and what is the most effective way of implementing?!

Link here

Thanks so much !

1 Like
2

Custom code is how to pull this off and I would strongly advise against using background images since you can’t have responsive images. Instead you would use <img> or the <picture> element plus CSS to get the affect. Remember that landing pages should be as performant as possible.

1 Like
3

I think you could use a CMS collection. The collection could just have a name and an image (these would represent your background choices), then on your page you can make your “background” element exist inside of one item in the collection.

In the settings you’d make the collection only ever show one of those elements. You can set a limit in the settings and also set it to choose a random element from the collection.

Screenshot 2024-03-01 at 9.37.09 PM
Screenshot 2024-03-01 at 9.37.09 PM460×536 19.1 KB

Then you can get the background image from the collection as well…

Screenshot 2024-03-01 at 9.40.50 PM
Screenshot 2024-03-01 at 9.40.50 PM480×512 25 KB

4

Based on the requirements provided by @blh1234 - your solution won’t meet them. It would only provide for a refresh every 12 hours regardless of refresh or multiple loads. Everyone sees the same thing. For many users yours is a simple and workable solution. Thanks for sharing!

5

Hi Jeff, thanks so much for your advice.

Checking I have understood correctly, would the code within this page work for me?

Beth

6

OK i have taken a slightly different approach, ive created a slider and added various images to it, then have removed the navigational objects away so it just looks like an image. Now I need to work out how to set up the ‘randomised’ selection for the images on loading.

Using this page I have got the below code, but it doesnt seem to be working for me…

<script>
  $(".hero-mask").append($(".mask").children().sort(function () {
    return Math.random() - 0.5;
}));
</script>

Any additional help would be really appreciated !!

7

me again, sorry, but to let you know i have fixed it !! thanks so much

1 Like