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.


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 - Webflow - Nameless

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?


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 
Karel (I made www.zimjs.com/kids better)