如何在HTML中设置页面背景图片 现有代码无法生效问题求助

你现有的代码存在语法错误、路径错误和属性缺失三个问题，对应修改如下：

错误点梳理 #

• background-image的属性值应该用url()包裹，不是你写的src()
• 样式里填写的背景图路径错误，和你可正常加载的图片路径./img/BD1.jpg不一致
• 没有设置html、body的高度，也没有配置背景图的适配规则，无法实现铺满效果

修正后完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
/* 清除浏览器默认边距，避免背景边缘出现空白 */
* {
  margin: 0;
  padding: 0;
}
/* 给根元素和body设置100%高度，才能撑满整个浏览器视口 */
html, body {
  height: 100%;
}
body {
  /* 填写正确的背景图路径，用url()包裹 */
  background-image: url('./img/BD1.jpg');
  background-repeat: no-repeat;
  /* 背景图等比缩放至完全覆盖body */
  background-size: cover;
  /* 背景图居中展示，避免裁切重点内容 */
  background-position: center center;
}
</style>
</head>
<body>
<!-- 如果你不需要在页面内单独显示这张小图，可以直接删掉下面这行img标签 -->
<!-- <img src="./img/BD1.jpg"/> -->
<a href="student.php">Student data</a>
</body>
</html>

修改后即可实现背景图铺满整个页面的效果。

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