Randomise an elements background colour on each page load, with the colour being pulled from a CMS

Hey folks,

I’m currently designing a website where I want to background of the header element to change each time a user visits the page. I have the colours in my CMS - is there a way to load these colours into the background and have them randomly change on page load?

If anybody could point me in the right direction, that would be great.

I don’t have a read only link right now as I am just designing in Figma, but I’m keen to know if this method is possible.

Thanks!

You would need to do this with custom code and yes, it is possible. I would consider this a freelancer task if you are not a coder.

Hey Jeff,

Thanks for getting back to me.

Since posting I’ve had a go on Webflow to try and implement this feature.

Here’s my link - https://preview.webflow.com/preview/nameless-f29ced?utm_medium=preview_link&utm_source=designer&utm_content=nameless-f29ced&preview=a9dffc4179ec3788b4960990b764ffb7&workflow=preview

I’ve tried the Random Sorting via the CMS, but this only updates the background colour every 12 hours.

I also found this thread - [CMS] Random sorting - #11 by discovoador

Where there is a script posted, I tried to implement this but it’s still not working as I want.

Could you point me in the right direction?

Thanks!

use zimjs.com very eady to implent wit webflow.io ! also parallax is possible

var background = asset(“name.png”).scaleTo().center()

check als number 2 adding backgroundiages in  ZIM Slack Transporter 
greetings
Karel (I made ZIM Kids - Coding Workshop, Lessons, Tutorial, Camp, School better)