如何使用CSS设置覆盖整个body元素的全屏背景图片

代码错误原因 #

你的代码中background-image属性的赋值语法不符合CSS规范：CSS引入背景图片不需要使用src=，需要将图片地址放在url()函数内即可。
你使用的错误写法：

background-image: src="https://backgroundcheckall.com/wp-content/uploads/2017/12/technology-background-image-11.jpg";

修正后的单属性写法：

background-image: url("https://backgroundcheckall.com/wp-content/uploads/2017/12/technology-background-image-11.jpg");

完整全屏覆盖背景代码 #

如果需要实现背景图完全铺满整个页面、无重复、无变形、无周边白边的效果，可以参考以下完整代码：

body {
  padding: 10px;
  margin: 0; /* 清除浏览器默认给body添加的外边距，避免背景四周出现白边 */
  min-height: 100vh; /* 保证body最小高度等于浏览器视口高度，避免内容过少时背景无法铺满屏幕 */
  background-image: url("https://backgroundcheckall.com/wp-content/uploads/2017/12/technology-background-image-11.jpg");
  background-repeat: no-repeat; /* 禁止背景图重复平铺 */
  background-position: center; /* 背景图居中显示 */
  background-size: cover; /* 按比例缩放背景图，保证完全覆盖body区域，超出部分自动裁剪，不会出现拉伸变形 */
  background-attachment: fixed; /* 可选配置：页面滚动时背景图固定不动，不需要该效果可删除此行 */
}

核心属性说明 #

• 100vh：视口高度单位，100vh对应浏览器可视区域的完整高度
• background-size: cover：实现全屏覆盖的核心属性，自动适配容器尺寸同时保留图片原有比例
• margin: 0：清除浏览器默认样式，避免背景边缘出现空白

内容的提问来源于stack exchange，提问作者Luigi Filippo Fassati