CSS中的Background属性是在网页设计中最为常用的属性之一，它能够为网页添加颜色、图片、水印等元素，为网页设计增添了很大的灵活性和美观度。针对这一属性，我们可以通过掌握其使用技巧和实例，为网页设计提供更加丰富的可能性，达到更好的显示效果。

一、背景颜色

最基本的一种方式就是设置网页背景颜色，为了让网页看起来不单调，我们可以通过给不同的元素设置不同的背景颜色来让它们区分开来，同时也可以提高整个网页的美观度和整洁度。通过CSS中的background-color属性可以设置页面的背景颜色，这里我们可以输入颜色的名称或十六进制数值两种方式进行设置。

实例如下：

二、背景图片

除了设置纯色背景，利用图片作为背景图案来丰富页面的装饰效果也是一种常见的方法。通过CSS中的background-image属性，我们可以为页面添加不同的背景图片，可以是单一的图片，也可以是一组重复图案单元。这里需要注意的是，在设置背景图片时，图片的路径应该是相对于网站根目录的相对路径。

实例如下：

三、背景重复

当页面的背景图片过小，无法覆盖整个背景面积时，我们同样可以通过CSS中的background-repeat属性将图片进行平铺，让整个背景面积得到补齐。重复的方式分为纵向平铺（repeat-y）、横向平铺(repeat-x)和不进行平铺(none)三种方式。

实例如下：

四、背景位置

当页面的背景基本确定后，我们还可以通过CSS中的background-position属性来调整背景图片的位置。位置的调节单位为像素或百分比，可以根据需要进行调节。背景位置的设置同样因页面背景色与背景图片的不同而发生变化。当背景图片上有内容则需进行位置的调整，以便达到好的显示效果。

实例如下：

五、背景附着

当页面滚动条从页面可见区域中滚动离开时，我们会发现页面中的背景图片也会滚动出去，导致页面的原本意图失效。此时，我们可以通过CSS中的background-attachment属性来进行调整，使背景图片固定在窗口的指定位置，从而避免背景图片的随滚动而翻动。

实例如下：

六、CSS Sprites 技术

CSS sprites技术是为了避免网页图片数量过多造成加载速度缓慢的现象而提出的一种前端优化技巧。它将多张图片拼成一张大图，在页面中引用一张大图，并用background-position来调节需要显示的那张子图片的位置，达到节省HTTP请求数量、降低网页加载时间和提升网页性能的目的。。

举例如下：

CSS Sprite

In this example, only one image is used to display the "back" navigation button: