一、背景图片简介
背景图片是网页设计中最基本的元素之一，用来装饰网页背景、营造氛围、表现网页主题、增强元素征服力等，是构建一个卓越网站的重要组成部分。
二、设置背景图片
HTML中设置背景图片可以使用style属性来设置背景图片，如下所示：
<body style="background-image:url(images/bg.jpg)">
CSS的background属性可以设置背景图片的一些参数。其中background-image属性用来设置背景图片地址，如下所示：
body {
background-image:url(images/bg.jpg);
}
三、设置背景图片的大小
要设置背景图片的大小，可以使用background-size属性。background-size属性能够设置背景图片的宽度和高度，我们可以选择是否固定，也可以将其设置为自适应屏幕大小。
1. 设置固定大小
如果您想要设置固定大小的背景图片，可以使用像素（px）或em作为单位，也可以使用百分比进行设置。如下所示：
body {
background-image: url(images/bg.jpg);
background-size: 100px 100px; /* 使用像素作为单位 */
background-size: 10em 10em; /* 使用 em 作为单位 */
background-size: 50% 50%; /* 使用百分比 */
}
2. 设置自适应背景图片大小
自适应背景图片大小，即保持背景图片比例不变的同时，根据容器的大小改变背景图片的大小。这种方式可以使用contain和cover设置。
- contain：保持纵横比缩放图像，以适合容器。
- cover：保持纵横比缩放图像，以覆盖容器。
body {
background-image: url(images/bg.jpg);
background-size: contain;
background-size: cover;
}
四、常见问题
1. 背景图片会不会失真？
当背景图片大小与容器大小不匹配时，可能会导致拉伸或压缩，导致图片失真。如果要避免背景图片失真可以保持图片比例不变，不过需要将图片大小设置为原始比例的一个倍数。如下所示：
body {
background-image: url(images/bg.jpg);
background-size: 200% 200%; /* 图片大小为原始大小的2倍 */
}
2. 背景图片的覆盖范围
在使用background-size: cover时，背景图片会以一种特殊的方式覆盖容器，但可能会覆盖的不完全。因此建议背景图片的尺寸略大于容器的尺寸，以确保完全覆盖容器。
五、总结
设置背景图片的大小需要注意以下几点：
1. 将图片大小设置为原始大小的两倍，可以避免失真。
2. 使用contain和cover设置自适应背景图片大小，保持图片比例不变。
3. 当图片大小与容器大小不匹配时，可能会导致失真或覆盖不完全，要特别注意。