asamuzaK.jp

現象の概要

IE7(Beta2)のbackground-attachment:fixedのバグ?でも述べているとおり、IE7で問題が発生するのは、background-attachment : fixed;を適用しようとした場合に、その要素か親要素に、position : relative;を指定している時である。 この時、IE7はそのrelative指定された要素の上辺を基準に画像を固定してしまう。 また、後続する要素の左paddingが失われて、その分の左marginが増えたような感じに描かれる。

ちなみに、親要素より遡った祖先要素にrelative指定してある場合は、画像の配置自体は正常だが←ウソでした^^;、背景画像そのものが適用されていません、やはり後続する要素の左paddingが失われる。

対策

IE7(Beta2)のbackground-attachment:fixedのバグ?でも述べているが、relative指定している要素に、あわせて幅を指定してやればよい。 しかし、幅指定したくない場合もあるので、以下に、このサイトのh2要素でのCSS指定を例に対策を書いておく。

XHTML側。

<link rel="stylesheet" type="text/css" charset="UTF-8"
      href="http://asamuzak.jp/css/template.css" />
<!--[if ie 7]>
<link rel="stylesheet" type="text/css" charset="UTF-8"
      href="http://asamuzak.jp/css/ie7.css" />
<![endif]-->

CSS側。

h2 {
    background : url(../img/img0.jpg) center no-repeat fixed;
    /* この例では、画像をセンターに配置 */
}

そして、ie7.cssでは、expression()を用いて次のように指定している。

h2 {
    background-attachment : scroll;
    background-position-y : expression(document.documentElement.scrollTop
                            - this.offsetTop - this.offsetParent.offsetTop
                            - (1064 - document.documentElement.clientHeight)/2);
}

画像の配置をscrollに戻し、その上で、expression()でその都度、画像を再描画させて結果的に固定配置させるという次第。 1064というのは元画像(img0.jpg)の高さ(px)で、縦にもセンタリングするためにやっているもの。

ちなみに、IE6でもexpression()を用いれば背景画像の固定配置は実現できる。