我们可以使用CSS属性background-image来设置HTML元素的背景图像。这是一个例子：

#withImage {
    background-image : url('/images/css/bg-image-small.jpg');
}

这个示例CSS规则为ID为" withImage"的HTML元素设置了" background-image" CSS属性。要显示为背景图像的图像的URL在url('')声明中引用。在上面的示例中，URL是/ images / css / bg-image-small.png。

这是使用上述background-imageCSS属性值进行渲染时div元素的外观(我添加了一个虚线边框以向我们展示div元素的边界)：

Div与背景图片Div与背景图片Div与背景图片

如我们所见，div元素内的文本写在背景图像的顶部。另外，重复背景图像。在以下各节中，我们将研究如何控制该行为和其他行为。

背景重复 background-repeat

background-repeatCSS属性控制背景图像在应用到HTML元素内的重复方式。 background-repeatCSS属性可以接受以下值：

• 不可重复 （no-repeat）
• 重复 （repeat）
• 重复x （repeat-x）
• 重复Y （repeat-y）

" no-repeat"值使背景图像仅在HTML元素内显示一次。它既不垂直也不水平重复。

" repeat"值使背景图像在垂直和水平方向都重复。因此，如果HTML元素的高度为300像素，宽度为200像素，背景图像的高度为150像素，宽度为100像素，则背景图像将在水平方向重复2次(300/150 = 2)，在垂直方向重复2次(200/100 = 2)。

" repeat-x"值使背景图像水平重复，但不垂直重复。

" repeat-y"值使背景图像在垂直方向上重复，但在水平方向上不重复。

背景位置（background-position）

background-positionCSS属性用于设置背景图片的位置。 " background-position" CSS属性可以采用一组预定义值或者显式数字。我将向我们展示两者的工作原理。

预定义的背景位置值

预定义值分为2组。第一组指定水平位置，第二组指定垂直位置。

水平位置值为：

• left
• center
• right

垂直位置值为：

• top
• center
• bottom

设置" background-position" CSS属性的值时，我们可以为水平位置设置一个值，为垂直位置设置一个值。这是一个例子：

#withImage {
    background-image    : url('/images/css/bg-image-small.jpg');
    background-position : left top;
}

此示例CSS规则将背景位置水平设置为"左"，垂直设置为"顶部"。这会将背景图片的左上边缘放置在要应用的HTML元素的左上角。这是它的外观(带有" background-repeat：none")：

看看如果我们将" background-position"更改为" right bottom;"会发生什么；

现在，图像的右边缘与HTML元素的右边缘对齐，并且图像的下边缘与HTML元素的下边缘对齐。

两个" center"值将水平和垂直地将背景图像的中心与HTML元素的中心对齐。这是background-position：center center;看起来；

我们可以根据需要以任何方式组合水平和垂直值。

数值背景位置值

除了预定义的值，我们还可以将数字值用于background-positionCSS属性。与预定义值一样，我们可以为水平位置设置一个值，为垂直位置设置一个值。这是将水平位置设置为100像素，垂直位置设置为50像素的示例：

#withImage {
    background-image    : url('/images/css/bg-image-small.jpg');
    background-position : 100px 50px;
}

这是应用于div元素时的外观：

背景图像的左边缘位于HTML元素的左边缘右侧100像素处。背景图像的顶部边缘距离HTML元素的顶部边缘50像素。

我们也可以将百分比用于水平和垂直位置。当我们这样做时，浏览器会将X％，y％的点对准背景图像，并将X％，Y％的点对准HTML元素。这是一个例子：

#withImage {
    background-image    : url('/images/css/bg-image-small.jpg');
    background-position : 50% 50%;
}

本示例将水平和垂直对齐背景图像中50％的点，水平和垂直对齐HTML元素中50％的点。这是应用于div元素时的外观：

结果是居中的背景图像，因为背景图像的中心(50％，50％)与HTML元素的中心(50％，50％)对齐。

我们可以将固定数字值(例如像素)与百分比值混合使用。这是一个例子：

#withImage {
    background-image    : url('/images/css/bg-image-small.jpg');
    background-position : 20px 50%;
}

如果要将背景图像移到HTML元素的左侧或者顶部，也可以使用负值。这是一个例子：

#withImage {
    background-image    : url('/images/css/bg-image-small.jpg');
    background-position : -20px -20px;
}

这是应用于div元素时的外观：

请注意，背景图像现在仅部分可见。

背景附件

通常，当我们在浏览器中上下滚动时，HTML元素的背景图像会与其他内容一起滚动。例如，如果我们在body元素上设置了背景图片，则背景图片将在页面顶部(或者放置位置)可见。当用户向下滚动页面时，背景图像将向上滚动并跳出浏览器窗口，就像页面中的其余内容一样。

如果我们希望将HTML元素的背景图像保持固定，以使其不会随HTML元素中的内容一起滚动，则可以使用background-attachmentCSS属性。 background-attachmentCSS属性可以采用以下值：

• fixed
• scroll
• local

"固定"表示背景图片固定在浏览器的视口内。如果内容滚动，则背景图像不会随内容滚动。

scroll表示背景图像固定在HTML元素的边界内。如果HTML元素内的内容可以滚动，则HTML元素的背景图像将不会随之滚动。但是，如果滚动整个浏览器内容(视口)，则背景图像将遵循HTML元素的边界。

"本地"表示背景图像会与视口内或者HTML元素内的任何内容一起滚动(如果该元素可以滚动其内容)。

这是一个例子：

#withImage {
    background-image      : url('/images/css/bg-image-small.jpg');
    background-position   : 20px 20px;
    background-attachment : fixed;
}

这个示例将使附着在body元素上的背景图像在浏览器的视口内保持固定，即使用户上下滚动页面也是如此。

背景尺寸

background-sizeCSS属性用于调整HTML元素上设置的背景图片的大小。这是一个"背景大小"的例子：

#withImage {
    background-image      : url('/images/css/bg-image-small.jpg');
    background-position   : 20px 20px;
    background-size       : 200px 100px;
}

本示例将" backround-size" CSS属性设置为" 200px 100px"，这意味着200像素的宽度(第一个数字)和100像素的高度(第二个数字)。

我们还可以将百分比用作背景图像的宽度和高度。这是一个例子：

#withImage {
    background-image      : url('/images/css/bg-image-small.jpg');
    background-position   : 20px 20px;
    background-size       : 50% 50%;
}

此示例将宽度和高度都设置为背景定位区域的50％(请参见本页后面的" background-origin")。

背景起源

background-originCSS属性用于指定HTML元素的哪一部分与背景图像对齐。 background-originCSS属性可以采用以下值之一：

• border-box
• padding-box
• content-box

值" border-box"表示背景图像已经在HTML元素的边框下绘制。

值padding-box表示背景图像是从padding框开始绘制的。padding框从HTML元素的边框内开始。因此，背景图像的左上角与填充框的左上角对齐。

值" content-box"表示从内容框及其内部绘制背景图像。内容框从填充框开始，但不包含HTML元素的填充区域。

这是三个具有相同背景图片的div元素，但对background-originCSS属性使用了不同的值。左侧使用"边框框"，中间使用"填充框"，右侧使用"内容框"。

背景剪辑

background-clipCSS属性指定了将背景图像裁剪的位置。换句话说，要用背景图像填充HTML元素的面积的多少。 background-clipCSS属性采用以下值之一：

• border-box
• padding-box
• content-box

"边框"值表示背景图像是从HTML元素的边框下方和内部渲染的。

padding-box值表示HTML元素的唯一padding box部分具有渲染的背景图像。

" content-box"值表示HTML元素的仅内容框部分具有渲染的背景图像。

我们可以将" background-clip"属性与" background-origin"属性结合使用，以获取所需背景图像的剪辑和对齐方式。

这是三个div元素，所有元素的background-origin设置为border-box，而background-clip设置为border-box，padding-box和content-box来显示我们将两个CSS属性结合在一起的效果：