技术问询：如何实现用户每次访问首页时自动切换背景图？

Hey there! Glad you're looking to spice up your homepage with rotating backgrounds. Since your current background is set via CSS, here are two simple, effective ways to make it switch randomly every time someone visits:

Option 1: Directly Modify the CSS Style with JavaScript #

This approach targets your existing .container-fluid element and swaps out the background-image property as soon as the page loads.

First, create an array of your background image paths (double-check these paths match your project's file structure!):

// List all your background image URLs here
const backgroundImages = [
  "../../images/The Connection at St-Martin-in-the- Fields/Carousel image - med res The Connection -1067838.jpg",
  "../../images/your-second-background.jpg",
  "../../images/your-third-background.jpg"
];

// Pick a random image from the array
const randomIndex = Math.floor(Math.random() * backgroundImages.length);
const selectedImage = backgroundImages[randomIndex];

// Update the header container's background
const headerContainer = document.querySelector('header .container-fluid');
headerContainer.style.backgroundImage = `url("${selectedImage}")`;

Drop this script right before the closing </body> tag in your HTML so it runs only after the page elements have loaded.

Option 2: Use CSS Variables for More Flexibility #

If you prefer keeping most styling logic in CSS, use a CSS variable to hold the background image, then update that variable with JavaScript.

First, tweak your existing CSS to use the variable:

header .container-fluid {
  background-image: var(--header-bg-image); /* Replace the static URL with this variable */
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  padding-top: 36px;
  background-position: center; /* Add this to keep images centered nicely */
}

Then add this JavaScript to set the variable randomly on page load:

const backgroundImages = [
  "../../images/The Connection at St-Martin-in-the- Fields/Carousel image - med res The Connection -1067838.jpg",
  "../../images/your-second-background.jpg",
  "../../images/your-third-background.jpg"
];

const randomIndex = Math.floor(Math.random() * backgroundImages.length);
document.documentElement.style.setProperty('--header-bg-image', `url("${backgroundImages[randomIndex]}")`);

Quick Pro Tips #

• Verify image paths: Ensure each URL points to the correct location relative to your HTML file to avoid broken images.
• Stick to consistent aspect ratios: Using images with similar dimensions will prevent unexpected layout shifts.
• Add a fallback: If you want a default image in case JavaScript fails, set it as the initial value of the CSS variable or in the background-image property before the variable.

内容的提问来源于stack exchange，提问作者Just Joel