1. 简介
CSS（Cascading Style Sheets）是用来定义HTML和XML文档的样式的一种样式表语言，可以控制页面的布局、字体、颜色、背景等各方面的样式。在这篇文章中，我们将讨论如何使用CSS设置背景图片的位置。
2. CSS设置背景图片
在CSS中设置背景图片使用的是background-image属性。例如，以下代码将在页面的body元素中设置背景图片：
body {
background-image: url("example.jpg");
}
2.1 背景图片的重复
背景图片默认会在水平和垂直两个方向上重复显示。但有时候我们可能希望背景图片只在某个方向上重复显示或根本不重复。这时可以使用background-repeat属性。该属性有以下几个值：
repeat：背景图片在水平和垂直两个方向都重复显示。
repeat-x：背景图片只在水平方向重复显示。
repeat-y：背景图片只在垂直方向重复显示。
no-repeat：背景图片不重复显示。
下面的代码演示了如何将背景图片只在水平方向上显示：
body {
background-image: url("example.jpg");
background-repeat: repeat-x;
}
2.2 背景图片的位置
默认情况下，背景图片的位置在左上角。如果我们想要改变背景图片的位置，可以使用background-position属性。该属性有以下几种取值：
top-left：将背景图片放在左上角。
top-center：将背景图片放在顶部中间。
top-right：将背景图片放在右上角。
center-left：将背景图片放在中心左侧。
center-center：将背景图片放在中心。
center-right：将背景图片放在中心右侧。
bottom-left：将背景图片放在左下角。
bottom-center：将背景图片放在底部中间。
bottom-right：将背景图片放在右下角。
x% y%：将背景图片放在指定百分比位置
xpos ypos：将背景图片放在指定像素位置
需要注意的是，该属性的两个值分别代表水平和垂直位置。下面的代码演示了将背景图片位于页面中心：
body {
background-image: url("example.jpg");
background-position: center center;
}
我们也可以使用像素值或百分比来具体定位，例如下面的代码将背景图片放在距离页面左边界150像素，距离页面上边界200像素的位置：
body {
background-image: url("example.jpg");
background-position: 150px 200px;
}
或者使用百分比，例如下面的代码将背景图片放在距离页面左边界50%，距离页面上边界25%的位置：
body {
background-image: url("example.jpg");
background-position: 50% 25%;
}
2.3 多重背景图片
在CSS3中，我们可以使用多重背景图片来创建更复杂的背景效果。我们可以使用background-image属性多次设置多个背景图片。当有多个背景图片时，后面的背景图片会覆盖前面的背景图片，因此在设置背景图片的位置和重复时要注意。例如，下面的代码演示了使用两个背景图片：
body {
background-image: url("example1.jpg"), url("example2.jpg");
background-repeat: no-repeat, repeat-x;
background-position: center center, top left;
}
其中，第一个背景图片不重复显示，放在页面中心；第二个背景图片在水平方向重复显示，放在页面左上角。
3. 总结
在CSS中设置背景图片是网页设计中不可或缺的一部分。我们可以使用background-image属性设置背景图片、使用background-repeat属性设置背景图片的重复、使用background-position属性设置背景图片的位置，以及使用多重背景图片创建更复杂的背景效果。