背景画像のCSSテクニック

Web CSS

最近ではどのCSSテクニックを見ても、「あーこれこうなってるんでしょー」ぐらいにしか思わなくなっていたのですが、久しぶりに面白いテクニックを紹介していたので紹介。


http://bizcaz.com/archives/2009/01/18-055214.php
http://www.askthecssguy.com/2009/01/mike_asks_the_css_guy_about_a.html
http://econsultancy.com/reports


タイトルにもある通り「背景画像のCSSテクニック」なんだが、http://econsultancy.com/reportsを見ても分かる通りスクロールするとスルッと背景画像が変わる。これをCSSで組んでいるみたいだ。

<body>
    <div id="block1">
        ：
    </div>
    <div id="block2">
        ：
    </div>
</body>

HTMLをこんな感じにしといたら。


#block1{
    background: url("./images/sample1.jpg") no-repeat 30px 30px fixed;
}

#block2{
    background: url("./images/sample2.jpg") no-repeat 30px 30px fixed;
}

CSSをこんな感じにしとけばいいみたい！


背景画像にCSSのアタッチメントでfixedを指定して、「block1」も「block2」も同じところに背景を置いているんだねー
それで、表示領域がblock1からblock2に変わると、背景も変わるので上のリンクのようになるみたいだ。


まだまだ、CSSのおもしろい使い方はあるんだねー。あ、ただしIE6ではうまくいかないので別のCSSを当てとく必要がありそう…
CSS3もおもしろい内容が多いし、HTML5も気になるところ。
まだまだ勉強は続けないといけないね。