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では修正されている。








Trackback URL
One Comment
自分も背景固定したくていろいろと調べていたんですが、
いろいろ試しているうちにexpressionを使わずに背景固定する方法に辿り着いたのでカキコしてみます。
要点から言うと、スターハックを用いてie6専用にbody要素のスクロールバーを消して、代わりにdiv要素を縦横100%で全体に被せて、overflow-y:auto;とするものです。
ie6に限定すればheight:100%がウィンドウサイズにあわせてキレイにハマるので、ものの見事にすり変わりました。
現在作成中の個人趣味サイトのリニューアル中に発見したので、まだサンプルとかはありませんが悪しからず。
Post a Comment