body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
背景图片的一份副本居中，其他副本放在它的上方和下方，形成一个元素后面的垂直带。
内容
CSS 属性允许作者指定元素的前景颜色和背景。背景可以是颜色或图像。背景属性允许作者定位背景图像、重复图像，并声明它是否应固定相对于视口，或者随着文档滚动。
请参阅颜色单位部分，了解有效颜色值的语法。
| 名称: | color |
|---|---|
| 值: | <color> | inherit |
| 初始值: | 取决于用户代理 |
| 适用于: | 所有元素 |
| 继承性: | 是 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 按指定计算 |
此属性描述了元素文本内容的前景颜色。可以通过不同方式指定红色：
em { color: red } /* 预定义颜色名称 */
em { color: rgb(255,0,0) } /* RGB 范围 0-255 */
作者可以将元素的背景（即其渲染表面）指定为颜色或图像。根据框模型，"背景"指的是内容、内边距和边框区域的背景。边框颜色和样式通过边框属性设置。外边距始终是透明的。
背景属性不会继承，但由于'background-color'的初始值为“透明”，因此父元素的背景默认会透过。
根元素的背景成为画布的背景，覆盖整个画布，锚定点（对于'background-position'）与仅为根元素本身绘制背景时相同。根元素不会再次绘制此背景。
然而，对于 HTML 文档，我们建议作者为 BODY 元素而非 HTML 元素指定背景。对于根元素为 HTML "HTML" 元素或 XHTML "html" 元素且其'background-color'计算值为“透明”和'background-image'计算值为“无”的文档，在为画布绘制背景时，用户代理必须使用该元素第一个 HTML "BODY" 元素或 XHTML "body" 元素子元素的背景属性计算值，并且不得为该子元素绘制背景。此类背景也必须锚定在与仅为根元素绘制时相同的位置。
但是，如果没有为将用于画布背景的元素生成框，那么画布背景是透明的。（在 CSS 2.2 中，当该元素或其祖先具有 'display: none' 时，就是这种情况。）
请注意，如果元素具有 'visibility: hidden' 但没有 'display: none'，则会为其生成框，并且其背景会用于画布。
根据这些规则，以下 HTML 文档的底层画布将具有“大理石”背景：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<TITLE>设置画布背景</TITLE>
<STYLE type="text/css">
BODY { background: url("http://example.com/marble.png") }
</STYLE>
<P>我的背景是大理石。
请注意，即使在 HTML 源代码中省略了 BODY 标签，BODY 元素的规则仍然有效，因为 HTML 解析器将推断出缺少的标签。
形成堆叠上下文的元素的背景（参见'z-index'属性）会在该元素的堆叠上下文的底部绘制，位于该堆叠上下文中的所有内容下方。
| 名称: | background-color |
|---|---|
| 值: | <color> | transparent | inherit |
| 初始值: | transparent |
| 应用于: | 所有元素 |
| 继承: | 否 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
此属性设置元素的背景颜色，可以是<color>值或关键字“transparent”，以使底层颜色透过。
h1 { background-color: #F00 }
| 名称: | background-image |
|---|---|
| 值: | <uri> | none | inherit |
| 初始值: | none |
| 应用于: | 所有元素 |
| 继承: | 否 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 绝对 URI 或 none |
此属性设置元素的背景图像。当设置背景图像时，作者应同时指定一个背景颜色，以便在图像不可用时使用。当图像可用时，它会在背景颜色上渲染。（因此，颜色在图像的透明部分可见。）
此属性的值为<uri>，用于指定图像，或“none”，当不使用图像时。
body { background-image: url("marble.png") }
p { background-image: none }
以百分比表示的内在尺寸必须相对于为'background-position'属性建立的坐标系的矩形尺寸来解析。
如果图像具有固有宽度或固有高度和固有纵横比，则缺失的尺寸将根据给定的尺寸和比例计算。
如果图像具有固有宽度或固有高度但没有固有纵横比，则缺失的尺寸假定为为'background-position'属性建立的坐标系的矩形尺寸。
如果图像没有固有尺寸但具有固有比例，则尺寸假定为在此比例下的最大尺寸，使得任一尺寸均不超过为'background-position'属性建立的坐标系的矩形尺寸。
如果图像也没有固有比例，则尺寸假定为为'background-position'属性建立的坐标系的矩形尺寸。
| 名称: | background-repeat |
|---|---|
| 值: | repeat | repeat-x | repeat-y | no-repeat | inherit |
| 初始值: | repeat |
| 应用于: | 所有元素 |
| 继承: | 否 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
如果指定了背景图像，此属性指定图像是否重复（平铺），以及如何重复。所有平铺都会覆盖框的内容、内边距和边框区域。
本规范未定义行内元素的背景图像的平铺和定位。CSS 的未来级别可能会定义行内元素的背景图像的平铺和定位。
这些值具有以下含义：
body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
背景图片的一份副本居中，其他副本放在它的上方和下方，形成一个元素后面的垂直带。
| 名称: | background-attachment |
|---|---|
| 值: | scroll | fixed | inherit |
| 初始值: | scroll |
| 应用于: | 所有元素 |
| 继承: | 否 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
如果指定了背景图像，此属性指定它是相对于视口固定的（“fixed”）还是随包含块（“scroll”）一起滚动。
注意，每个视图只有一个视口。如果一个元素具有滚动机制（见“overflow”），则“fixed”背景不会随着元素移动，而“scroll”背景不会随着滚动机制移动。
即使图像是固定的，它仍然只有在位于元素的内容、内边距或边框区域时才可见。因此，除非图像平铺（“background-repeat: repeat”），否则它可能不可见。
在分页媒体中，没有视口，“fixed”背景是相对于页面框固定的，因此在每一页上重复。
此示例创建一个与视口“粘合”在一起的无限垂直带，当元素滚动时，它保持固定。
body {
background: red url("pendant.png");
background-repeat: repeat-y;
background-attachment: fixed;
}
对于不支持“fixed”背景的用户代理（例如由于硬件平台的限制），应忽略包含“fixed”关键字的声明。例如：
body {
background: white url(paper.png) scroll; /* 适用于所有用户代理 */
background: white url(ledger.png) fixed; /* 适用于支持 fixed 背景的用户代理 */
}
详见一致性部分。
| 名称: | background-position |
|---|---|
| 值: | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
| 初始值: | 0% 0% |
| 应用于: | 所有元素 |
| 继承: | 否 |
| 百分比: | 参考框自身的大小 |
| 媒体: | 视觉 |
| 计算值: | 对于<length>为绝对值，其他为百分比 |
如果已指定背景图像，此属性指定其初始位置。如果只指定了一个值，则假定第二个值为“center”。如果至少有一个值不是关键字，则第一个值表示水平位置，第二个值表示垂直位置。允许使用负的<percentage>和<length>值。
然而，如果图像具有内在比例，但没有内在大小，则在 CSS 2.2 中位置未定义。
body { background: url("banner.jpeg") right top } /* 100% 0% */
body { background: url("banner.jpeg") top center } /* 50% 0% */
body { background: url("banner.jpeg") center } /* 50% 50% */
body { background: url("banner.jpeg") bottom } /* 50% 100% */
本规范未定义内联元素上背景图像的平铺和定位方式。未来版本的 CSS 可能会定义内联元素上背景图像的平铺和定位方式。
如果背景图像在视口内固定（见属性），则图像相对于视口而不是元素的内边距框放置。例如，
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
在上述示例中，单一图像放置在视口的右下角。
| 名称: | background |
|---|---|
| 值: | [<'background-color'> || <'background-image'> || <'background-repeat'> || || <'background-position'>] | inherit |
| 初始值: | 见各属性 |
| 应用于: | 所有元素 |
| 继承: | 否 |
| 百分比: | 允许在 'background-position' 中使用 |
| 媒体: | 视觉 |
| 计算值: | 见各属性 |
'background'属性是用于设置各个背景属性的简写属性（即，'background-color'、'background-image'、'background-repeat'、和'background-position')。
给出有效的声明后，'background'属性首先将所有单独的背景属性设置为其初始值，然后分配声明中给出的显式值。
在以下示例的第一条规则中，只给出了'background-color'的值，其他单独的属性设置为其初始值。在第二条规则中，所有单独的属性都已指定。
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }