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

Post a Comment

Your email is never published nor shared.