个人Portfolio网站首页添加背景图片后显示异常的技术求助

Hey there! I totally get how frustrating it is when something almost works but vanishes right away—let’s get that background image stuck around on your home section for good. Here’s what’s going on and how to fix it:

Why the image flashes then disappears #

When you added the background attribute directly to the HTML tag, it gets overridden by CSS styles later (CSS has higher priority than inline HTML attributes for most styling). That’s why you see it briefly before the solid color takes over. We need to set the background image using CSS instead, and make sure that style doesn’t get overwritten.

Step-by-step fix #

1. First, remove the inline background attribute from your home section in index.html (around line 25). So if you have something like <section background="img/banner.png">, delete that background part—we’ll handle it all in CSS.

2. Open your CSS file (likely named style.css or main.css in your project). Look for a selector targeting your home section. If your home section has an id like <section id="home">, we’ll use #home as the selector. If it uses a class, use .home. If there’s no existing selector for it, just create a new one at the bottom of the CSS file (putting it at the bottom helps with priority).

3. Add these CSS properties to the selector:

#home {
  /* Path to your image—adjust this if your CSS file is in a subfolder (like /css) */
  background-image: url('img/banner.png'); 
  /* If your CSS is in a /css folder, use this path instead: url('../img/banner.png') */
  
  background-size: cover; /* Makes the image fill the section without weird stretching */
  background-repeat: no-repeat; /* Prevents the image from tiling */
  background-position: center; /* Centers the image in the section */
  min-height: 100vh; /* Ensures the section is tall enough to show the image (takes full viewport height) */
}

4. Save the CSS file and refresh your website—the background image should stay visible now!

If it still doesn’t work: #

• Check the image path again: Make sure the path in url() matches where your banner.png is. If you’re unsure, right-click any broken image placeholder in your browser and check the "src" to see where it’s looking for the file.
• Use your browser’s dev tools (press F12, go to the Elements tab): Select your home section, then look at the Styles panel. If the background-image line has a strikethrough, that means another CSS rule is overriding it. Fix this by making your selector more specific (e.g., body #home instead of just #home) or moving your #home CSS rule below the conflicting one in the file.

That should do the trick! Let me know if you run into any snags along the way.

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