网站背景颜色无法显示，背景图片覆盖问题求助

一、先修复HTML结构错误 #

错误的标签嵌套和闭合会导致布局异常，先修正以下问题：

1. 将样式表引入标签<link>移到<head>内部，这是标准的资源引入位置：

<head>
  <meta charset="UTF-8">
  <title> EECS1012: Lab 2 - Eating Journal </title>
  <link href="eatfood.css" type="text/css" rel="stylesheet">
</head>

2. 修正div的嵌套与闭合：
   • <div id="section1">必须放在<body>内部，不能在外面。
   • 删除多余的</div>标签，确保每个div都正确闭合，避免布局混乱。修正后的完整HTML结构示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> EECS1012: Lab 2 - Eating Journal </title>
  <link href="eatfood.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div id="section1">
    <h1> Eating Journal </h1>
    <h2 class="main"> Good things to eat and where to find them </h2>
  </div>
  <div>
    <h2><span id="dates"> 09/06/2018: Idli </span></h2>
    <p>
      Idlis are a favorite in India.   They are made from a lentil and rice batter that is steamed.
      In India these are very cheap . . unfortunately, they will cost you in Toronto.
    </p>
    <p>
      <img src="images/idly.png" height="200" alt="Idli">
    </p>
    <p>
      If you like Indian food, check out Karaikudi in Scarborough.
    </p>
  </div>
  <div>
    <h2><span id="dates"> 08/24/2018: Pide </span></h2>
    <p>
      If you haven't tried <em> Pide </em>, also known as Turkish Pizza, your
      life is not complete.
    </p>
    <p>
      <img src="images/pide.jpg" height="200" alt="Pide - turkish pizza">
    </p>
    <p>
      My current favorite Pide Restaurant, is Mr. Pide in Greektown, Toronto.
      Order the <strong> Lahmacun </strong>!
    </p>
  </div>
  <div>
    <h2><span id="dates">08/22/2018: Shawarma  </span></h2>
    <p>
      One of the many excellent Middle Eastern foods you can find in Toronto -- Shawarma!
    </p>
    <p>
      <img src="images/shawarma.jpg" height="200" alt="shawarma">
    </p>
    <p> If you like shawarma, check out Ali Baba's.  They have two for the price of
      one falafel sandwiches on Tuesdays!
    </p>
  </div>
  <div> 
    <h2><span id="dates"> 07/10/2018: Jianbing </span></h2>
    <p>  Jianbing is a street food from China.  It is very popular as a breakfast food.</p>
    <p>
      <img src="images/jianbing.jpg" height="200" alt="jiangib">
    </p>
    <p> Unfortunately, I haven't found a good restaturant in Toronto that has jianbing.  But
      here is a nice video showing it being made in Beijing. </p>
    <p class="footer"> (c) Author of the Eating Journal - Abdel Zhang </p>
  </div>
</body>
</html>

二、调整CSS实现需求 #

问题核心是background简写属性覆盖了背景色，且背景图默认延伸到元素的margin区域，导致div间隙被背景图覆盖。按以下修改CSS：

/* 设置html的背景色，作为div间隙的显示颜色 */
html {
    background-color: white;
}

body {
    /* 单独设置背景图，避免覆盖背景色 */
    background-image: url("images/background.gif");
    /* 限制背景图只在body的border以内区域显示，不延伸到margin */
    background-clip: border-box;
    border-style: solid;
    border-color: green;
    border-width: thick; 
    margin-right: 10%;
    margin-left: 10%;
}

#section1 {
    border-style: solid;
    border-color: red;
    background-color: rgb(255, 255, 255);
    border-width: thick; 
} 

h2.main {
    border-style: solid;
    border-color: orange;
    border-width: thick;
    background-color: rgb(255, 255, 255);
}

#dates {
    border-style: solid;
    border-color: purple;
    border-width: thick;
}

p.footer {
    border-style: solid;
    border-color: orange;
    border-width: thick;
}

div {
    border-style: solid;
    border-color: blue;
    border-width: thick;
    /* 给div设置白色背景，覆盖body的背景图 */
    background-color: white;
    /* 设置上下margin，形成明显的间隙 */
    margin: 1.5em 0;
}

关键说明 #

1. background-clip: border-box：限制body的背景图只在border、padding、content区域显示，不会延伸到margin区域，div的margin区域会显示html的白色背景。
2. 给所有div添加background-color: white：确保div内部显示白色，不透出body的背景图。
3. 用background-image代替background简写：避免覆盖背景色设置，同时保留背景图的显示。

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