css背景图片属性

基础代码：

div {
  width: 200px;
  height: 200px;
  background: url(./css-logo.png);
}

<div></div>

1、background-repeat：默认是repeat

        设置背景图片在容器内是否平铺。

        

background-repeat: repeat-y;

background-repeat: repeat-x;

background-repeat: no-repeat;

2、background-position：可使用关键字或坐标（数字+单位，正负均可；水平方向，正数向右，垂直方向，正数向下。）

        注：设置时可设置两个值，如center top，若两个值相同，可简写为center。

background-position: 100px 100px;

background-position: right;

background-position: center;

background-position: left;

background-position: bottom;

background-position: top;

3、background-size：设置背景图片大小（可设置为关键字：cover、contain；百分比-根据盒子尺寸计算大小；数字+单位）

        contain：等比例缩放，以完全装入，可能显示空白；

        cover：等比例缩放，以完全覆盖，可看不全。

background-size: 50px;

background-size: 50%;

background-size: contain;

background-size: cover;

4、background-attachment：fixed，背景不会随元素的内容滚动。

background-attachment: fixed;

小贴士：

大背景图一般设置为background-repeat: no-repeat;background-position: center top;