1.设置背景颜色和图像
设置元素背景的起点是设置背景颜色或者背景图像，也可以使用背景属性同时设置两者。
<style type="text/css"> p { border: medium solid black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: repeat-x; } </style> <！--将背景颜色设置为浅灰色，使用URL记载了一张banana.png的图片作为background- image属性的值。-->
banana图片使用了重复，使用background- repeat属性可实现。
background- repeat属性的值：
我们可以单独指定水平方向和垂直方向的重复样式，要是只有一个值的话，两个方向均会使用同种重复样式。
2.设置背景图像的尺寸
使用background- size可以调整图像尺寸。属性值可以为：长度值、百分数（跟图像的宽度和高度相关）、预定义值。
- contain值确保图像调整尺寸后，整个图像始终包含在元素内部。浏览器判断图像长度和高度哪个更大，并将较大者调整至容器相应宽度或者高度大小。
- 属性取cover值，浏览器选中较小的值，并沿着该方向调整图像大小。
- banana图像的高度比宽度大，使用cover值的时候，应该调整图像尺寸，使得宽度方向上能被完全显示，即使这会导致高度方向上显示不完整。
- 要是使用contain值，就必须确保高度方向能在元素盒子中完整呈现，即使最终图像不能覆盖整个背景区域。
3.设置背景图像位置
background- position属性：设置背景图像的位置。图像不平铺时用的最多。
<style type="text/css"> p { border: 10px double black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: no-repeat;background-position: 30px 10px; } </style> <!--设置距离左边界30px，距离顶部边界10px。-->
⚠️可使用长度单位指定，也可使用预定义值。
background- position属性值：
- 第一个值控制垂直位置，可以为top、bottom、center。
- 第二个值控制水平位置，可以为left、right、center。
4.设置元素的背景附着方式
textarea是常见的具有视窗的元素（详情请阅读），可以自动添加滚动条以显示内容。body元素，其中的内容比浏览器的窗口长，可以为其设置滚动条。
background- attachment属性：可以控制背景的附着方式。
background- attachment属性值：
<style type="text/css"> textarea { border: medium solid black; background-color: lightgray; background-image: url(banana.png); background-size: 60px 60px; background-repeat: repeat; background-attachment: scroll; } </style>
5.设置背景图像的开始位置和裁剪样式
- 背景的起始点（origin）指定背景颜色和背景图像应用的位置。
- 裁剪样式决定了背景颜色和图像在元素盒子中绘制的区域。
background-origin属性：设置背景的起始点。
background-clip属性：设置裁剪样式。
background-origin和background-clip属性的值：
<style type="text/css"> p { border: 10px double black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: repeat; background-origin: border-box; } </style> <style type="text/css"> p { border: 10px double black; background-color: lightgray; background-image: url(banana.png); background-size: 40px 40px; background-repeat: repeat; background-origin: border-box; background-clip: content-box; } </style>
6.使用background简写属性
使用background简写属性可以在一条声明中设置所有的背景值：
background: <background-color> <background-position> <background-size> <background-repeat> <background-origin> <background-clip> <background-attachment> <background-image>
有些值可以省略。
<style type="text/css"> p { border: 10px double black; background: lightgray top right no-repeat border-box content-box local url(banana.png); } </style>
