Background image changing by date

Design help Custom code
1

Hey everybody, I have a project with a background image that’s being used in the landing section’s design. I wanted to be able to have this image change every day, so the website has a “new” feel each day. I was hoping to use the scheduling feature for CMS but realized I couldn’t schedule an “unpublished” only a “publish”. Any ideas on how I could achieve this maybe some other way?

Thanks in advance!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I think Javascript will be your best bet. This looks like a simple solution: javascript - How to change background every day? - Stack Overflow

let element = document.querySelector('.change-my-colour');
/* .change this to .main-division in your code ^^^ */
let date = new Date();

switch(date.getDay()) { /* use date.getDate() instead for days of the month */
  case 0: /* Sunday */
    element.style.background = "red";
    break;
  case 1: /* Monday */
    element.style.background = "orange";
    break;
  case 2: /* Tuesday */
    element.style.background = "yellow";
    break;
  /* etc... */
  default:
    break;
}
1 Like
3

I appreciate the response Chris! Unfortunately I’m not sure this would work as this seems to be rotating through a set number of images. I need to find some kind of work around possibly natively within Webflow as we’d need a new image literally every day, not just rotating through 7 images for a week. Again, thanks for the feedback though!!

4

Outside of custom code, and native to Webflow would definitely be the best approach.

1 Like
5

There is no way to achieve this without custom code. You have mentioned different images for each day in the year or 100 years?

Option 1: Use any services that offer image storage like Claudinary upload zillion images and use JS to request (random or specific) image each day at noon.

Option 2: Use services that provide free images like Unsplash or others and request different images at noon. in this option, you will need also to provide image optimization and compression to serve the ideal image for the device webpage is open with and also the image format supported by the browser. etc. etc.

Good luck

1 Like
6

That will work, thanks Stan!