1、背景属性有以下：

背景颜色、背景图片、背景图片填充方式、背景图片大小、背景图片显示位置。

2、background-color属性

设置背景颜色

  1. div{
  2.   width: 300px;
  3.   height: 300px;
  4.   background-color:red;
  5. }

3、background-image属性

设置背景图片

  1. background-image: url(./1.jpg);

4、background-repeat属性

设置背景图片填充方式，如果元素大小是小于背景图片的，那么会默认背景图片是显示不全的，只显示一部分的，如果元素大小是大于背景图片的，那么会在横向和纵向多出重复的背景图片，此时便需要进行填充设置。

  1. background-repeat:repeat;       默认值，水平与垂直方向重复填充
  2. background-repeat:repeat-x;     只向水平方向平铺，水平方向重复填充
  3. background-repeat:repeat-y;     只向垂直方向平铺，垂直方向重复填充
  4. background-repeat: no-repeat;   不重复填充

5、background-size属性

设置背景图片大小。

  1. length      设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只设置一个，第二个auto。
  2. background-size: 1200px 1000px;
  4. percentage  计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只设置一个，第二个auto。
  5. background-size: 100% 100%;
  7. cover       保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小，这种方式用的最多
  8. background-size: cover;
  10. contain     保持图片纵横比并将图片缩放成适合背景定位区域的最大大小
  11. background-size: contain;

6、background-position属性

设置背景图片显示位置，默认是0% 0%(左上角)。

  1. left top      左上角
  2. left center   左中
  3. left bottom   左下
  4. right top     右上角
  5. right center  右中
  6. right bottom  右下
  7. center top    中上
  8. center center 中中
  9. center bottom 中下
  10. x%  y%        第一个值是水平位置，第二个值是垂直位置，
  11. 左上角是0% 0%，右下角是100% 100%。如果只指定了一个值，别一个值为50%。

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>背景属性</title>
  7.     <style>
  8.       div{
  9.         width: 2040px;
  10.         height: 1020px;
  11.         background-image: url(./1.jpg);
  12.         background-repeat: no-repeat;
  13.         background-size: cover;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <div>
  19.     </div>
  20.   </body>
  21. </html>

image.png