Randomize background img on page refresh

Design help General
1

Hi-

I’m trying to figure out how to have my background image randomly change when I reload my homepage - or if this is already a Webflow feature I’ve missed (new to the site!). I’ve seen one other post on this topic but its not any clearer to me… Any suggestions?

Thanks!!

Here is my site Read-Only:
https://preview.webflow.com/preview/ambikas-blank-site?utm_medium=preview_link&utm_source=designer&utm_content=ambikas-blank-site&preview=110e2b6f98972e53eb19c35d46f56cdb&mode=preview

2

Hi @apharma, welcome!

Webflow supports randomizing a collection lists output, which could include an image or images. The drawback to this is that the randomized output is cached for 12 hours, and would be the same for each visitor. Not per page load.

The other approach would involve using custom code.

Questions that I would ask to create a custom code solution, would include:

What is the source of the random images, how many are there, do they need to be updated often, would they need to be optimized for different devices?

So that should give your an overview. Once you isolate exactly what you need, you could then start looking for examples in the forums and elsewhere. I might even have a few suggestions.

Hopefully this helps you get the process started.

3

Hi! I’m trying to do the same. I wanted to create a random linear-gradient background for the hero section. Since gradients are not supported in CMS, I simply randomized the collection color and added a linear gradient (transparent to white) above it to replicate the effect. I did the same thing with the mobile menu (but with a radial-gradient).

However, as you mentioned, the color is the randomized output is cached and therefore doesn’t change.

Source of the random colors: CMS collection. There are 5 at the moment. They should be updated on each reload. The sizes are already optimized and the radial-gradient cascades down from mobile landscape.

Here’s a link to my project:
https://preview.webflow.com/preview/gianfrancosuito?utm_medium=preview_link&utm_source=designer&utm_content=gianfrancosuito&preview=5fd08cb047b2be8909bbd1d399709179&mode=preview