100％宽度不适用于Div的背景图像

Question

我有一张图片，我需要在我的网页页脚中显示100％宽度的背景图片。但我的图片在页脚右侧被切割。

这是我在HTML中的代码..

<div id="footer" class="footer-shadow">
</div>

这是css。

.footer-shadow
{
position:relative;
background-image: url('../img/new_images/footer-bg.png');
margin-top:2px;
height: 220px;
width: 100%;
color: gray;
}

请帮助我纠正它并使其响应以适应所有网页大小。谢谢。

Answer 1

你可以这样做：

background: url('../img/new_images/footer-bg.png') center center no-repeat;
background-size: contain;

Answer 2

尝试使用background-size：

.footer-shadow
{
position:relative;
background-image: url('../img/new_images/footer-bg.png');
margin-top:2px;
height: 220px;
width: 100%; /* it sets the div width */
color: gray;
background-size: cover; /* now bg image is full width */
}