Single Article

IE6でbackground:fixedを実現する:CSS

backgroundプロパティの最後にfixedをつけると、背景画像が固定されてウインドウをスクロールしても動かなくなり、面白い効果を演出することが出来る。はずなのだが、IE6では背景画像が固定されずに動いてしまう(というよりも、body要素に対して固定されるのでスクロールするとbody要素がスクロールするので動くという解釈らしい)。これをIE6でも固定するのにもexpressionメソッド(ダイナミックプロパティ)を使うしかない。通常の記述は以下。

.fixedHeader {
   background: #FFF url(hoge.jpg) no-repeat  50px  0px <strong>fixed</strong>;
}

IE用にハックを用いて、以下のスクリプトを適用する。

* html .fixedHeader {
   background-position: expression('50px '+this.parentNode.scrollTop + 'px');
}

ちなみにIEがJavascriptをoffにしている環境では動作しないので、その場合を想定して、

position: fixed !important;  /* IE以外用 */
position: absolute;             /* IE様用 */

を、入れたほうが良い。 なお、background-attachment:fixedのこの問題は、IE7では修正されている。

Related Posts

Trackback URL

One Comment

  1. 鯱忍
    Posted 2009/8/27 at 12:21 am | Permalink

    自分も背景固定したくていろいろと調べていたんですが、
    いろいろ試しているうちにexpressionを使わずに背景固定する方法に辿り着いたのでカキコしてみます。

    要点から言うと、スターハックを用いてie6専用にbody要素のスクロールバーを消して、代わりにdiv要素を縦横100%で全体に被せて、overflow-y:auto;とするものです。
    ie6に限定すればheight:100%がウィンドウサイズにあわせてキレイにハマるので、ものの見事にすり変わりました。

    現在作成中の個人趣味サイトのリニューアル中に発見したので、まだサンプルとかはありませんが悪しからず。

Post a Comment

Your email is never published nor shared.