HTML/CSS

[HTML/CSS] フッターの上部置いた背景画像が見切れてしまう時の対処

フッターの上部に背景画像を置きたいことがあります。
例）フッターを地面に見立てて樹木の画像を配置したい。
例）フッターを道路に見立てて自転車の画像を配置したい。

 

以下のようにしても背景画像はしっかり表示されません。
divの外にはみ出た画像は見切れてしまいます。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
【以下、HTML】
<div id=”footer”>～ここにフッターが入る～</div>

【以下、CSS】
#footer {
background:url(image/background_bicycle.png) no-repeat center -80px;
background-color: #555;
padding:15px 0px 15px 0px;
height: 50px;
}
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

 

そこで以下のようにします。
背景画像がしっかり表示されるようになります。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
【以下、HTML】
<div id=”footer_wrap”>
<div class=”background”></div>
<div id=”footer”>～ここにフッターが入る～</div>
</div>

【以下、CSS】
.background{
background:url(image/background_bicycle.png) no-repeat center 0px;
height:80px;
}
#footer {
background-color: #555;
padding:15px 0px 15px 0px;
height: 50px;
}
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑