背景图像未填充完整的 div 大小

【问题标题】：background image does not fill the full div size背景图像未填充完整的 div 大小
【发布时间】：2013-09-26 20:56:58
【问题描述】：

这是应用于 div 的 css：

#header{
    background-size: 100%;
    background: url('../img/header.png');
    width: 100%;
    height: 200px;
    border-bottom: 10px solid #b2d234;
}

正如您在图片中看到的那样，底部边框适合整个宽度，但背景图像既没有填满整个宽度也没有填满整个高度，即使没有应用填充或边距。

非常感谢任何指导。

更新：

我已经缩小，所以很容易看到问题。问题是背景图像正在重复，并且每次重复之间都有小空间。我尝试了不重复选项，但我只获得了一次背景，它并没有填满整个屏幕。

请看图：

【问题讨论】：

标签： css

【解决方案1】：

用途：

background-size: cover;

更新了 CSS。

#header{
    background-size: cover;
    background: url('../img/header.png');
    width: 100%;
    height: 200px;
    border-bottom: 10px solid #b2d234;
}

【讨论】：

另外，如果您需要在背景上稍微流血，只需将其设置为 background-size:105% 并添加 background-position:center;
实际上要覆盖的背景大小没有任何变化。事实上，如果我在更大的屏幕上测试它，我什至会在右侧得到相同的出血。我需要的是图片覆盖整个宽度和距离顶部 200px 的高度。
背景位置：中心；刚刚移除了顶部出血，并将侧面的缩小了，但距离侧面仍有大约 7px。
我已经编辑了问题并添加了一张截图，现在可能更清楚了。