html - CSS で画像をフッターの背景として設定する

Question

だから私は自分のページにフッターを追加しようとしていますが、モニターの解像度に応じて自動的にサイズ変更される背景画像になり、幅と高さが 100% で、横にはみ出さないようにしたいので、スクロールバーを表示したくありません。画像は.jpgです。

これを回避する最善の方法は何かについての意見をいただければ幸いです

Answer 1

次の CSS を使用します

​div {
    width: 100%;
    height: 400px;
    background-image: url(your-path-here.jpg);
    background-size: 100% 100%;
}​

そして、このライブの例を見てください

Answer 2

フッターの高さも変更しないと、画像が引き伸ばされるので注意してください。

background-sizeトリックを行いますが、IE8 以前ではサポートされていないことに注意してください。これらのブラウザーで安全を期すために、画像を中央に配置することもできます (つまり、水平方向に 50%、垂直方向に 50% という意味です。もちろん、center キーワードも機能します)。

ライブデモ: http://dabblet.com/gist/2790711