求助：GitHub Pages上CSS设置的背景图片无法显示

Let's break down the most likely reasons your background image isn't displaying, along with straightforward fixes:

1. Incorrect Relative Path in CSS #

This is the most common culprit! When defining background-image in a CSS file, the file path is relative to the location of the CSS file itself, not the HTML file that links to it.

Your CSS file lives at resources/css/style.css, and your image is stored at resources/img/antelope.JPG. To navigate from the css folder to the img folder, you need to move up one directory first using ../:

header { 
  background-image: url("../img/antelope.JPG"); 
  background-size: cover; 
  background-position: center; 
  height: 100vh; 
}

Your current path resources/img/antelope.JPG would look for a resources folder inside the css folder (which doesn't exist), leading to a broken image link.

2. Case Sensitivity on GitHub #

GitHub (and most web servers) treat file names as case-sensitive. Double-check that:

• The image file in your repo is exactly named antelope.JPG (not antelope.jpg, Antelope.JPG, or any variation in capitalization)
• Your CSS path matches the exact case of the image filename.

3. Image File Not Uploaded to the Repo #

Confirm that antelope.JPG is actually committed and pushed to your master branch (GitHub Pages uses the master branch for username.github.io repos). Navigate to your repo's resources/img directory to verify the file is present.

4. Browser Caching #

Sometimes your browser holds onto an outdated version of your CSS. Try a hard refresh to load the latest files:

• Windows/Linux: Ctrl + F5
• Mac: Cmd + Shift + R

5. Rare Edge Cases #

While unlikely, you can also check:

• The image file has public permissions (default for public GitHub repos)
• The image isn't excessively large, which could cause loading delays or failures

Start with fixing the relative path—it's the most probable issue here!

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