SOURCE

background-repeat: repeat(默认) | repeat-x | repeat-y | no-repeat 
当导入的背景图片如果大于父容器的尺寸，那么图片会被自动裁切以适合容器大小。如果小于容器尺寸，那么会自动平铺。
通过background-repeat用来控制图片的平铺方式。 
repeat： - 默认值 ，当图片小于容器时，在x,y轴同时平铺 
repeat-x： - 当图片小于容器时，只在x轴进行平铺
repeat-y: - 当图片小于容器时，只在y轴平铺
no-repeat: - 当图片小于容器时，不进行平铺。


background-position: top left （需要两组关键词）
当图片小于容器时， 用于定位图片在容器中的位置。 
本质上是将容器分成井字9宫格。
我们需要输入两组关键词，如果只写一个关键词，那么第2次关键词默认是center;

也可以通过偏移量来设定位置

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

div{float: left;margin-right: 30px;}
.box1{
  width: 400px;
  height: 400px;
  background-color: lightpink;  /* 遇到有透明区的图片会直接映出background-color */
  background-image:url(http://m2.auto.itc.cn/car/LOGO/BRAND/J_2010.png); /* 不需要输入引号，但是有特殊字符时加上引号更好 */
  background-repeat: repeat;  /* 由repeat控制平铺方式 */
}

.box2{
  width: 400px;
  height: 400px;
  background-color: lightyellow;
  background-image:url(https://logosquiz.net/data/quizlogogame/images/l_b_nasa.png);
  background-repeat: no-repeat;
  
  /*position来控制 图片位置 */
  background-position: bottom right;  /* 9宫格定位 */
  background-position: 150px 30px;    /* 坐标定位,以父容器左上角为原点，图片的左上角为起始点偏移 */
  background-position: -50px -30px;   /* 可以出现负值 */
}