1. 背景图大小的概念
在网页设计中，背景图指的是作为网页背景的图片，而背景图大小指的是该图片在网页中所占的大小。通过设置背景图的大小，可以更好地控制背景图片的展示效果，让网页更加美观。
2. 使用background-size属性设置背景图大小
2.1 background-size属性概述
CSS3引入了background-size属性，该属性用于设置背景图的大小，可以通过该属性指定背景图的实际尺寸大小，或者通过百分比来设置其相对于容器的大小。
对于需要适配不同屏幕尺寸的网页设计来说，使用百分比设置背景图大小比较常见。
2.2 使用百分比设置背景图大小
在使用百分比设置背景图大小时，需要使用background-size属性，并将值设置为百分比。
例如，下面的代码会将背景图的大小设置为所在元素宽度的50%：
background-size: 50%;
这里需要注意的是，如果使用百分比设置背景图大小，当容器的宽度或高度改变时，背景图的大小会自动跟随调整，这种相对于容器的自适应性很好地解决了网页适配问题。
2.3 使用固定尺寸设置背景图大小
通过使用精确的像素值，也可以将背景图的大小设置为固定的大小。
例如，下面的代码会将背景图的大小设置为400像素宽，200像素高：
background-size: 400px 200px;
需要注意的是，在使用固定尺寸设置背景图大小时，无论容器大小如何改变，背景图的大小都会保持不变。
3. 设置背景图片覆盖容器实现全屏背景
在实际网页设计中，经常需要将背景图片完全覆盖整个浏览器窗口，从而实现全屏背景效果。
实现全屏背景的方法有很多，其中较为流行的是通过设置position属性为fixed，然后将背景图片覆盖整个浏览器窗口。
3.1 设置背景图片固定于浏览器窗口
通过将position属性设置为fixed，可以让所在元素位置固定于浏览器窗口。
例如，下面的代码会将position设置为fixed，从而将所在元素固定在浏览器原点，并覆盖整个浏览器窗口：
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
上述代码中的background-size属性使用了cover值，表示背景图会被拉伸以覆盖整个容器。
而background-position属性用于设置背景图的位置，具体来说，center值表示背景图居中展示。
background-repeat属性用于设置背景图的重复方式，no-repeat值表示不重复。
position属性设置为fixed，使得元素固定在浏览器原点。
最后，通过top、left、right、bottom四个属性设置边界值，使得元素能够完全覆盖整个浏览器窗口。
需要注意的是，由于这种方式会让背景图完全覆盖网页内容，因此要将元素的z-index属性设置为-1，这样可以将其置于所有网页内容的下方。
3.2 设置背景图片滚动固定
另一种常见的全屏背景实现方式是，让背景图片不跟着网页的滚动而滚动，从而实现滚动固定的效果。
实现这种效果的方式是，使用background-attachment属性，并将其设置为fixed：
background-attachment: fixed;
这样设置以后，即可让背景图片在页面滚动时保持固定，从而实现滚动固定的效果。
4. 总结
通过使用background-size属性，可以轻松地控制背景图片的大小。而配合使用position属性，可以实现全屏背景效果，从而让网页更加美观。