网页背景重复问题咨询：添加内容至div容器时的原因及解决方法

嘿，我来帮你搞定这个背景重复的问题！先看你给出的CSS代码，我发现了几个可能导致问题的点，咱们一步步来解决：

核心原因分析 #

你写的.body是类选择器，但你实际要设置的是页面的<body>标签样式——如果你的HTML里没有给<body>元素添加class="body"，那这段背景样式根本不会生效！浏览器会用默认的background-repeat: repeat规则，当容器内容增多撑大页面后，背景图就会重复显示了。

另外还要确认一下imgs/background.jpeg的路径是否正确：如果你的CSS文件是放在单独的css文件夹里，那路径应该写成../imgs/background.jpeg（向上跳出css文件夹再找imgs），路径错误也会导致背景图加载失败，浏览器用默认重复的纯色背景兜底。

修正后的CSS代码 #

把选择器改成body（去掉前面的点），同时确保路径正确，修正后的代码如下：

body { 
  background: url("imgs/background.jpeg") no-repeat center center fixed; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover; 
} 
.main{ 
  background-color:rgba(255,255,255,0.9) ; 
  margin:25px; 
} 
.container{ 
  width:63%; 
  height:auto; 
  background-color:rgba(255,255,255,0.9); 
  float:left; 
  box-shadow: 1px 1px 1px #000, 3px 3px 5px grey; 
  font-family: 'Orbitron', sans-serif; 
  text-shadow: 1px 1px 1px #000, 3px 3px 5px grey; 
  margin-bottom: 30px; 
}

额外注意事项 #

• 如果你确实是想给某个带body类的元素设置背景，那要确保HTML里对应的元素加了class="body"，不过一般页面背景都是给<body>标签设置，所以第一种修正方式更合理。
• 已经添加的background-size: cover会让背景图自适应覆盖整个容器，配合no-repeat和fixed，就能保证背景图不重复且固定在视口内，不会随页面滚动或内容增多而重复。

内容的提问来源于stack exchange，提问作者João Leal