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
Post a Comment