前の記事 «:2008年5月21日 管理人のブックマーク
次の記事 »:オンラインで画像編集ツールまとめ

CSSで背景画像をリサイズするテクニック

2008年05月22日

スポンサード リンク
How To: Resizeable Background Image - CSS-Tricks
Is there a way to make a background image resizeable?

CSSで背景画像をリサイズするテクニック

デモサイトを見ると、驚くべきことに、背景画像のサイズがビローンと伸びて表示されます。


記事中では3種類の手法について書かれていますが、JavaScriptなしで、CSSだけで実現する3つ目の方法がスマートです。
background-image ではなく、画像に次のようなCSSを宛てることで実現しているみたい。

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body {
    overflow: hidden;
}

背景が伸びるというと、ちょっと珍しいので実装してみるとちょっとしたインパクトが与えられ、面白いかもしれませんね。

スポンサード リンク

投稿者 KJ : 2008年05月22日 07:09 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。