1. 简介
当我们在网页中需要制作一个较大的 div 元素时，通常会遇到一个问题：如何设置 div 的背景？比如，在以下的代码中，我们想要设置 mydiv 的背景图片为 bg.jpg：
<!DOCTYPE html>
<html>
<head>
<title>HTML - 设置背景图片</title>
</head>
<body>
<div id="mydiv">
</div>
</body>
</html>
然而，由于 mydiv 的大小较大，当我们直接设置其背景图片时，很可能出现图片无法完整填满 mydiv 的情况，出现白色边框的问题，给用户带来较丑的视觉效果。那么，如何设置背景图片才能够充分填充整个 div 呢？
2. 背景图片的设置方法
在上述问题中，我们可以使用 CSS3 中的background-size属性来解决，它可以定义背景图片的大小以充分填满元素：
#mydiv {
background-image:url('bg.jpg');
background-size:cover;
}
以上代码将mydiv的背景图片以尽可能大的比例乘以元素的高宽比例规定下来，然后将其覆盖整个元素。
除了 background-size:cover，还可以使用background-size:contain。它也将尝试最大化背景图片的大小，但不会进行裁剪，无法保证整个元素都被填充。
3. 背景图片的定位
当元素的大小大于背景图片时，我们需要对背景图片的起始位置进行调整。因此，我们需要将background-position属性设立为 center。
#mydiv {
background-image:url('bg.jpg');
background-size:cover;
background-position:center;
}
上述代码可以将背景图片的中心点对齐到元素的中心点，确保背景图片在元素中心。
4. 背景图片的重复
默认情况下，当元素大小小于背景图片时，背景图片会重复填充整个元素。我们可以使用background-repeat属性防止背景图片重复。例如，将其设置为 no-repeat 则可以保证背景图片不产生重复填充。
#mydiv {
background-image:url('bg.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
5. 结尾
通过上述的 CSS 属性，我们可以有效地解决背景图片无法适当填充较大 div 元素的问题。如果您还有任何疑问，欢迎在评论中留言！