CSS background-size改变背景图像大小
在HTML文档中为元素添加背景图像可能会遇到一些情况，比如图像的大小不一定会契合元素的宽度和高度。如果图像面积小于元素的面积，那么默认情况下，图像将会不断重复，直至覆盖元素面积，如果设置不重复，空出来的地方又显得不协调，如果使用一张图像充满整个元素，又可能遇到图像像素模糊的情况。那么，该怎么改变背景图像的大小呢？
CSS改变背景图像大小
CSS当中，可以通过background-size属性设置背景图像的大小，用法如下：
E{background-size:contain | cover | width(px) height(px) | width(%) height(%)}
提示：中间的“|”符号表示“或”的意思，其余的表示各类属性值。
属性值解析表：
| 值 | 描述 |
|---|---|
| contain | 在保持像素长宽比的前提下，缩小背景图片以适应元素的尺寸大小 |
| cover | 保持像素长宽比，并扩展图片以填满元素 |
| width和height，单位为px | 调整背景图像到指定像素的大小 |
| width和height，单位为% | 调整背景图像到指定百分比（相对设置背景图像的元素）的大小 |
background-size实例代码，及在线编辑器
<div id='x1'></div>
<style>
#x1{width:100%;height:100%;background-image:url("../../static/img/bmi.jpg");background-size:100% 100%;}
</style>