Angular项目中SCSS设置的背景图片无法在浏览器显示求解决

你的代码里有几个关键问题导致背景图不显示，逐个修正即可：

1. 修复background-image语法错误 #

background-image属性只能指定图片路径，不能直接加no-repeat——这是background-repeat的专属属性。把错误写法拆分：

.container {
  left: 0px;
  top: 0px;
  height: 100%;
  background-image: url('../../assets/images/Rectangle\ 12.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

或者用更简洁的background简写属性：

.container {
  left: 0px;
  top: 0px;
  height: 100%;
  background: url('../../assets/images/Rectangle\ 12.png') no-repeat center / cover fixed;
}

2. 确保父元素高度生效 #

.container的height:100%是相对于父元素的高度，如果html和body没设置高度，容器的100%高度会失效。在全局样式（比如styles.scss）里添加：

html, body {
  height: 100%;
  margin: 0; // 去掉默认边距，避免出现滚动条
}

3. 给容器添加定位属性 #

left和top属性只有在非静态定位（比如fixed、absolute）下才会生效，否则这些属性不起作用。给.container加上：

position: fixed; // 用fixed会让背景固定在视口，absolute则跟随文档流
width: 100%; // 加上宽度，确保铺满整个屏幕

4. 验证图片路径是否正确 #

• 确认图片确实放在src/assets/images/目录下，文件名（包括大小写）要完全匹配，Angular对路径大小写敏感。
• 可以尝试用绝对路径替代相对路径，比如url('/assets/images/Rectangle 12.png')（注意去掉转义符\，空格直接写即可）。

把这些修正后的代码整合起来，就能实现图片铺满背景的效果了。

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