全屏背景图片实现问题求助

我正在为自己参与的独立游戏工作室制作官网，现在遇到了一个问题——没法让背景图片铺满整个页面。我试过不少教程，但都没解决问题，接下来我该试试什么方法呢？

我的源代码 #

HTML部分

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>BerryBlastGames</title>
  <link rel="shortcut icon" href="Images/logo.png" />
  <link rel="stylesheet" type="text/css" href="BBG_home.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div class="logo">
    <a href="BBG_home.html"><img src="Images/rsz_berryblast_logo_header.png" /></a>
  </div>
  <div class="navbar">
    <ul>
      <li><a href="BBG_about.html">About</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Games</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Shop</a></li>
    </ul>
  </div>
  <div class="social">
    <ul>
      <li>
        <a href="#"><i class="fa-brands fa-instagram"></i></a>
      </li>
      <li>
        <a href="#"><i class="fa-brands fa-discord"></i></a>
      </li>
      <li>
        <a href="#"><i class="fa-brands fa-tiktok"></i></a>
      </li>
      <li>
        <a href="#"><i class="fa-brands fa-youtube"></i></a>
      </li>
      <li>
        <a href="#"><i class="fa-brands fa-twitch"></i></a>
      </li>
    </ul>
  </div>
  <div id="background"></div>
  <div class="center">
    <h1>Welcome to BerryBlastGames</h1>
    <p> Crafting epic gaming experiences that transport you to worlds of Nordic legend and adventure. </p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
  </div>
</body>
</html>

CSS部分

body { margin: 0; height: 1500px; display: flex; align-items: center; justify-content: center; }
.navbar ul { list-style: none; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px); padding: 0; margin: 0; position: fixed; overflow: auto; text-align: center; top: 0px; z-index: 0; width: 100%; }
.navbar li { display: inline-block; }
.navbar a { text-decoration: none; color: white; width: 100px; display: block; padding: 25px 20px; font-size: 24px; text-transform: uppercase; font-weight: bold; text-align: center; }
.navbar a:hover { color: darkred; }
#background { background-image: url(https://i.sstatic.net/oThpRIHAm.png); background-size: cover; height: 100vh; width: 100%; position: fixed; background-position: center center; top: 0; z-index: -1; }
.logo img { position: fixed; top: 5px; margin-left: 10px; z-index: 1; }
.social ul { list-style: none; text-align: right; position: fixed; right: 40px; gap: 20px; top: -5px; }
.social li { display: inline-block; }
.social a { text-decoration: none; color: white; width: 10px; display: block; padding: 15px 20px; font-size: 24px; text-transform: uppercase; font-weight: bold; text-align: right; }
.social a:hover { color: darkred; }

问题分析与修复方案 #

先说说核心问题出在哪：

• 你给body设置了固定的height:1500px，还加了display: flex这类居中属性，这不仅会强制限制页面高度，还会干扰背景的全屏表现——当内容超过1500px时，滚动后就会出现背景覆盖不到的空白区域。
• 另外，body默认的padding没清零，虽然你设了margin:0，但还是可能出现细微的白边。

下面是调整后的关键代码，我会标注每一处修改的原因：

修正后的核心CSS代码

/* 重构body样式：去掉固定高度和不必要的flex，清除默认内外边距 */
body {
  margin: 0;
  padding: 0; /* 新增：清除默认padding，避免页面边缘出现白边 */
  /* 移除height:1500px、display:flex、align-items、justify-content这些属性，让body高度由内容自动撑开 */
}

/* 优化背景元素，确保绝对全屏覆盖 */
#background {
  background-image: url(https://i.sstatic.net/oThpRIHAm.png);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* 用这个属性替代position:fixed，更适配滚动场景，背景会固定在视口 */
  position: fixed;
  top: 0;
  left: 0; /* 新增：确保背景从页面左上角开始渲染，避免偏移 */
  width: 100vw; /* 用100vw替代100%，确保覆盖整个视口宽度，不受父元素影响 */
  height: 100vh;
  z-index: -1;
}

/* 给内容区加样式，避免贴边和被导航遮挡 */
.center {
  padding: 80px 20px; /* 顶部留空避开固定导航栏，左右加边距让内容不贴屏幕边缘 */
  max-width: 1200px;
  margin: 0 auto; /* 让内容块在页面中居中，提升可读性 */
}

/* 优化导航栏层级，避免被其他元素遮挡 */
.navbar ul {
  /* 保留原有样式，修改z-index */
  z-index: 2; /* 从0改成2，确保导航始终在背景和logo之上 */
}

/* 修复社交图标布局，让gap生效 */
.social ul {
  list-style: none;
  position: fixed;
  right: 40px;
  gap: 20px;
  top: 10px; /* 从-5px改成10px，避免图标超出视口顶部 */
  display: flex; /* 新增：flex布局下gap属性才会生效，让图标间距正常显示 */
  padding: 0; /* 清除默认padding，避免布局偏移 */
}

/* 优化社交图标点击区域 */
.social a {
  width: auto; /* 从10px改成auto，让点击区域和图标大小匹配，提升交互体验 */
  padding: 15px 10px; /* 调整内边距，让图标显示更合理 */
}

额外小提示

• 如果想让背景图片在屏幕缩放时尽可能保留细节，可以考虑加上background-repeat: no-repeat（不过cover属性默认已经会阻止重复，加了更保险）。
• 你的导航栏overflow: auto可以去掉，因为导航项是横向排列的，不会出现滚动条。

这样修改后，你的背景图片就能真正铺满整个页面，不管怎么滚动都不会出现空白，同时页面内容也能正常展开、交互~

内容来源于stack exchange