为什么HTML/CSS单页面无法设置多个独立背景且no-repeat不生效？

你出现该问题的核心原因是使用了全局通配符*给页面所有元素统一设置了背景属性：

* {
  background: url(image/stacks.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

这意味着页面内的html、body、div、li、a等所有元素都会独立加载一次stacks.jpg背景，且每个元素的背景都是居中不重复展示，视觉上就会出现背景重复的效果，同时子元素的背景会覆盖父元素的背景，自然无法给header、footer、body设置独立的背景效果。

1. 首先清理通配符内的背景相关属性，只保留全局重置样式即可：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 单独给body设置全局背景，保证页面全局背景只有一份：

body {
  background: url(image/stacks.jpg) center no-repeat;
  background-size: cover; /* 可选配置，让背景铺满整个视口不会出现空白 */
  min-height: 100vh; /* 保证body高度至少等于屏幕高度，避免背景半截显示 */
}

3. 给页面增加语义化标签，方便单独给不同模块设置背景，修改你的HTML结构如下：

<!DOCTYPE html>
<html>
<head>
  <meta name="keywords" content="htmls,tech,learn" />
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>t3lem_تعليم</title>
</head>
<body>
  <!-- 头部区域 -->
  <header>
    <div id="hehe">
      <ul>
        <li> Home</li>
        <li> <a href="youtube.html">   الفيديوهات    </a></li>
        <li> اتصل بنا</li>
        <li> عن الموقع</li>
      </ul>
    </div>
    <div id="HI">
      <a href="https://www.youtube.com/channel/UCi0k9ygpc-NXOL090pIUkuw/"> <img src="https://yt3.ggpht.com/4qs1rBAWeor-sAeiNr9fDSHw4dtpF6--drGr70O_xAhA5Zq9LVSZAPe-vuiVIzRKIxwvlF5Evw=s600-c-k-c0x00ffffff-no-rj-rp-mo" width="80px" alt="频道logo"> </a>
      العودة للقناة
    </div>
  </header>
  <!-- 主体内容区域 -->
  <main>
    <div id="wrapper">
      <div id="web">
        Welocme to T3leem_Website
      </div>
      <div id="mar">
        أهلا بكم في موقع تعليم
      </div>
      <div id="OK">
        الصفحة الرئيسية
      </div>
    </div>
  </main>
  <!-- 页脚区域（可自行补充内容） -->
  <footer>
  </footer>
</body>
</html>

4. 之后就可以单独给头部、主体、页脚设置独立背景，示例如下：

/* 头部独立背景 */
header {
  background: #333; /* 可替换为你需要的背景图/背景色 */
  padding: 10px 0;
}

/* 页脚独立背景 */
footer {
  background: #222; /* 可替换为你需要的背景图/背景色 */
  height: 80px;
  margin-top: 20px;
}

额外优化建议：你当前代码中多个元素重复设置了相同的background-image属性，可将相同样式抽为公共类，减少代码冗余。

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