如何将背景图片固定在浏览器窗口顶端？

我是HTML/CSS新手，正在修改他人创建的HTML页面，遇到两个问题：

• 无法让背景图片贴紧窗口顶端，试过background、background-image、position等相关设置都没用
• 设置background-color: white;后，背景图的蓝色无法延伸到页面底部，会出现不想要的白色背景

效果展示 #

• 设置白色背景时的效果：
  
• 设置background-color: #1f5a86;时的效果：
  
• 使用的背景图片：
  

当前代码 #

Body的CSS代码 #

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  background-image: url("https://i.sstatic.net/7oF46gQe.png");
  background-repeat: no-repeat;
  background-position: top;
  background-color: white;
}

HTML代码 #

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Blabla</title>
  <link href="Style_blabla.css" rel="stylesheet" media="all" type="text/css">
  <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d = document;
      if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length,
          a = MM_preloadImages.arguments;
        for (i = 0; i < a.length; i++)
          if (a[i].indexOf("#") != 0) {
            d.MM_p[j] = new Image;
            d.MM_p[j++].src = a[i];
          }
      }
    }
  </script>
  <link type="text/css" rel="stylesheet" href="file:///directory/Style_blabla.css">
  <link type="text/css" rel="stylesheet" href="file:///directory/SpryCollapsiblePanel.css">
  <link type="text/css" rel="stylesheet" href="SpryAssets/SpryCollapsiblePanel.css">
  <link type="text/css" rel="stylesheet" href="Liste_deroulante.css" title="Liste_deroulante">
</head>

<body>
  <div class="difusion" style="position: static; width: 220px;"><b>DIFUSION
        </b></div>
  <table class="tableauTitre" style="width: 1128px; height: 138px;" cellspacing="0" cellpadding="0" border="0">
    <tbody id="2" class="Tbleau_onglet">
      <tr>
        <td width="200"><br>
        </td>
        <td width="650"><a href="BlablaTheme.html"><strong></strong></a><strong><a

                name="haut"></a></strong>
          <a href="Blabla_Accueil.html"><img style="border: 0px solid ; width: 810px; height: 120px;" src="Titre_03.png"></a>
        </td>
      </tr>
    </tbody>
  </table>
  <nav>
    <ul>
      <li class="Deroulant"><a href="#">Accueil  </a>
        <ul class="sous">
          <li><a href="#">Thèmes</a></li>
          <li><a href="#">Domaines</a></li>
          <li><a href="#">Liste</a></li>
        </ul>
      </li>
      <li class="NonDeroulant"><a href="#">Institut  </a> </li>
      <li><a href="#">Catalogues</a></li>
      <li><a href="#" width:="130%">Diffusion</a></li>
      <li><a href="#">Contacts</a></li>
      <li><a href="#">Glossaire</a></li>
    </ul>
  </nav>
</body>

</html>

解决方法 #

1. 让背景图贴紧窗口顶端 #

默认html标签可能带有默认内边距/外边距，需同时重置html和body的边距：

html, body {
  margin: 0;
  padding: 0;
}

2. 让蓝色背景延伸到页面底部 #

有两种可行方案：

• 方案一：垂直重复背景图
  让背景图在垂直方向重复，同时将background-color设为和背景图底部一致的蓝色：

  body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url("https://i.sstatic.net/7oF46gQe.png");
    background-repeat: repeat-y; /* 垂直重复背景图 */
    background-position: top center; /* 背景图水平居中 */
    background-color: #1f5a86;
  }
  

• 方案二：撑满页面最小高度
  设置html和body的最小高度为视口高度，确保内容不足时也能覆盖整个页面：

  html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* 最小高度等于视口高度 */
  }
  body {
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("https://i.sstatic.net/7oF46gQe.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #1f5a86;
    background-size: cover; /* 可选：让背景图覆盖整个视口 */
  }
  

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