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

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

2008年05月22日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
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;
}

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

関連の記事検索:CSS, チュートリアル, Web制作
スポンサード リンク

By.KJ : 2008年05月22日 07:09 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)