How can I automatically change background images every time a user refreshes my website in Webflow?

You can automatically change the background image on each page refresh in Webflow using custom JavaScript. Since Webflow does not have a built-in feature for this, you’ll need to manually add code to your project.  

​

1. Add Images to Webflow Assets  

• Upload the background images to Webflow’s Assets panel.  
• Click on each image and copy its direct URL (right-click → "Copy URL").  

​

2. Add a Unique Class to the Background Element  

• Select the section or div where the background should change.  
• Assign a unique class name (e.g., dynamic-bg).  

​

3. Add Custom JavaScript to the Page  

• Go to Page Settings or Project Settings > Custom Code > Footer.  
• Paste the following script inside the Footer Code section:  

​

```javascript

<script>

  document.addEventListener("DOMContentLoaded", function() {

    var images = [

      "https://your-webflow-site.com/path-to-image1.jpg",

      "https://your-webflow-site.com/path-to-image2.jpg",

      "https://your-webflow-site.com/path-to-image3.jpg"

    ];

    var randomImage = images[Math.floor(Math.random() * images.length)];

    document.querySelector(".dynamic-bg").style.backgroundImage = "url('" + randomImage + "')";

  });

</script>

```  

​

4. Publish and Test  

• Publish your site and refresh the page multiple times to see the background change.  
• If the background does not update, check that:  
• The correct class name (dynamic-bg) is applied.  
• The image URLs are valid.  

​

Summary  

To change the background image on every refresh in Webflow, upload images, assign a background class, and paste a JavaScript snippet in the Footer Code section. The script randomly selects an image and applies it as the background each time the page loads. 🚀