1. 背景图片的简介
背景图片是网页设计中非常重要的一部分，可以大大提高网页的美观程度和吸引力。背景图片可以用来装饰整个页面，或为特定元素添加视觉效果。
在HTML中，通过设置background-image属性，可以轻松地将背景图片添加到网页中。
body {
background-image: url("background.jpg");
}
2. 背景图片的位置
默认情况下，背景图片会在页面的左上角开始显示。但是，在许多情况下，您可能希望将图片放置在不同的位置，以达到更好的视觉效果。
要在HTML中设置背景图片的位置，您可以使用background-position属性。
2.1 水平和垂直定位
您可以使用两个关键字来指定水平和垂直位置：
left：在页面的左侧对齐背景图片。
right：在页面的右侧对齐背景图片。
center：在页面的中心对齐背景图片。
top：在页面的顶部对齐背景图片。
bottom：在页面的底部对齐背景图片。
您可以将这些关键字组合在一起，以便在水平和垂直方向上完全定位背景图片的位置。
body {
background-image: url("background.jpg");
background-position: center top;
}
以上代码将背景图片放在页面的中心顶部。
2.2 指定像素值
您还可以使用像素值来指定背景图片的位置。像素值将背景图片相对于其容器的左上角定位。
以下是使用像素值设置背景图片位置的示例：
body {
background-image: url("background.jpg");
background-position: 200px 50px;
}
上述代码将背景图片向右移动200像素，向下移动50像素。
2.3 百分比定位
最后，您可以使用百分比来定位背景图片。
百分比值将背景图像的位置相对于容器的左上角定位。例如，如果您想将背景图像放在容器的中心，可以使用50%作为水平和垂直位置。
body {
background-image: url("background.jpg");
background-position: 50% 50%;
}
上面的代码将背景图像放在其容器的中心。
3. 背景图片的滚动
在有些情况下，您可能需要让背景图片随着页面的滚动而滚动。例如，如果您有一个长页面，您希望背景图像不断重复，以填充整个页面。
要在HTML中设置背景图片的滚动，您可以使用background-attachment属性。
3.1 固定滚动
默认情况下，背景图片会随着页面的滚动而滚动。但是，您可以使用fixed值，使背景图片固定在其容器的位置，不会随页面的滚动而移动。
body {
background-image: url("background.jpg");
background-attachment: fixed;
}
上述代码将背景图片固定在页面上，不会随着页面的滚动而移动。
3.2 滚动滚动
除了fixed值，您还可以使用scroll值，使背景图片相对于其容器滚动。
body {
background-image: url("background.jpg");
background-attachment: scroll;
}
上述代码使背景图片相对于其容器滚动。
4. 背景图片的重复
如果背景图片小于其容器的大小，它将被自动重复以填充整个容器。但是，您可以使用background-repeat属性来控制重复的方式。
4.1 水平和垂直重复
默认情况下，背景图片在水平和垂直方向上均重复。
body {
background-image: url("background.jpg");
background-repeat: repeat;
}
上面的代码使背景图片在水平和垂直方向上重复。
4.2 水平重复
如果您只希望背景图片在水平方向上重复，则可以使用repeat-x值。
body {
background-image: url("background.jpg");
background-repeat: repeat-x;
}
上面的代码使背景图片只在水平方向上重复。
4.3 垂直重复
如果您只希望背景图片在垂直方向上重复，则可以使用repeat-y值。
body {
background-image: url("background.jpg");
background-repeat: repeat-y;
}
上面的代码使背景图片只在垂直方向上重复。
4.4 不重复
最后，您可以使用no-repeat值，以使背景图片不重复。
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
}
上面的代码使背景图片不重复。
5. 总结
HTML中的背景图片是网页设计中非常有用的一部分，可以在视觉上增强网页的吸引力。在HTML中设置背景图片的位置、滚动和重复方式是非常重要的，可以为网页带来不同的视觉效果。
通过使用background-position、background-attachment和background-repeat属性，您可以完全控制背景图片的显示方式。