视差滚动效果正常，但背景图片无法贴合页面两侧及顶部

Hey there! Let's get that annoying gap sorted out. The problem is actually super common—it's caused by default browser styles that add a small margin to the <body> element. That margin is pushing your parallax container inward, creating the gap you're seeing. Here's how to fix it, plus a couple of tweaks to make your parallax look even better:

Step 1: Reset Default Body Margin #

Add this to your CSS to remove the browser's default margin on the body:

body {
  margin: 0;
}

This will make your page content stretch all the way to the edges of the viewport, eliminating the gap immediately.

Step 2: Improve Background Coverage (Optional but Recommended) #

Your current background setup works, but adding background-size: cover will ensure the image always fills the entire parallax container without awkward stretching or empty spaces, no matter the screen size. Update your .parallax class like this:

.parallax {
  /* The image used */
  background-image: url("background.jpg");
  min-height: 850px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* Add this line */
  width: 100%;
  text-align: center;
  padding-top: 95px;
  color: rgb(255, 255, 255);
  font-size: 2em;
}

Full Modified CSS Code #

Here's your complete CSS with the fixes applied:

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
html {
  background-color: rgb(228, 210, 210);
}

/* Reset default body margin */
body {
  margin: 0;
}

.parallax {
  background-image: url("background.jpg");
  min-height: 850px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* Ensures full coverage */
  width: 100%;
  text-align: center;
  padding-top: 95px;
  color: rgb(255, 255, 255);
  font-size: 2em;
}

#title {
  text-align: center;
}

.div1 {
  height: 500px;
  background-color: rgb(21, 106, 112);
  color: rgb(175, 174, 174);
  font-size: 32px;
  border-radius: 25px;
  padding: 15px 5px;
  margin-top: 15px;
  border: 3px solid rgb(0, 0, 0);
  font-family: 'Montserrat', sans-serif;
}

.div2 {
  height: 500px;
  background-color: rgb(60, 219, 153);
  color: rgb(92, 91, 91);
  font-size: 32px;
  border-radius: 25px;
  padding: 15px 5px;
  margin-top: 15px;
  border: 3px solid rgb(0, 0, 0);
  font-family: 'Montserrat', sans-serif;
}

ul, ul > h1 > li, #skills {
  color: rgb(102, 101, 101);
  list-style-type: square;
}

#sideprojects {
  text-align: center;
}

#nav-base {
  height: 50px;
  width: 100%;
  background-color: rgb(29, 28, 28);
}

Quick Note on HTML Structure #

Also, a tiny side tip: Your <ul> contains an <h2> element, which isn't valid HTML—lists can only have <li> elements as direct children. You might want to adjust that to keep your markup clean:

<div class="div2">
  <h2 id="sideprojects">Side Projects</h2>
  <h2>Skills</h2>
  <ul id="skills">
    <li>Java</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>Wordpress</li>
  </ul>
</div>

This will avoid any unexpected styling issues and keep your code standards-compliant.

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