CSS 背景属性用于定义元素的背景效果。

背景色

背景图片

background-image

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

{
  background-image:url(/i/eg_bg_04.gif);
}

background-repeat

根据 [background-repeat](https://www.w3school.com.cn/cssref/pr_background-repeat.asp) 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。

{
  background-image:url(/i/eg_bg_04.gif);
  background-repeat:no-repeat;
}

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-size

background-size
取值	length
初始值	auto
适用于	所有元素
计算值
继承性
动画性

背景定位

---

background-color

background-image

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

{
  background-image:url(/i/eg_bg_04.gif);
}

background-repeat

根据 [background-repeat](https://www.w3school.com.cn/cssref/pr_background-repeat.asp) 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。

{
  background-image:url(/i/eg_bg_04.gif);
  background-repeat:no-repeat;
}

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-attachment

指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background简写

在使用简写属性时，属性值的顺序为：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可

body {
  background: #ffffff url("tree.png") no-repeat right top;
}