expression()で背景画像固定
expression()でbackground-attachment:fixedを実現
うちんとこのサイトはセピア調モノクロームとフルカラーの馬鹿でかい写真が背景画像として用意してあって、ヨコとタテが1600*1064でそれぞれ200KBオーバーの重量級なのでこりゃかなり顰蹙を買うだろうなぁという思いは一瞬頭をかすめたもののそのまま通り過ぎてしまったために、その2枚の写真をピッタリ重ねて固定配置して基本モノクロでh2要素の中でだけカラー部分を切り抜く形で表示していて、はたして表現としてどのような意味があるのかないのかよくわからないことをエゴ丸出しでやっているわけだが、例によってCSSの対応が不十分でbackground-attachmentプロパティは効かないMSIEにも無理矢理同じ表示を実現させようとしてexpression()で弄くり回して案の定ドツボに陥った時のメモ。
MSIE専用の指定についてはconditional commentを使ってMSIEだけに読み込ませているが、思いつきで書いた当初の基本的な指定をわかりやすくするために省略形ナシで記述すると
h2 {
background-image : url(url);
background-repeat : no-repeat;
background-position-x : center;
background-position-y :
expression(document.body.scrollTop - this.offsetTop);
}
でこの形でいいんじゃないかと思いきやそれでいい場合ももちろんあるもののそうは都合良くいかないのがMSIEの常で、あれこれ悩んで一体どうやって正解を導き出したのかはもう覚えていないが後から考えてみれば至極当たり前の話になるその結論的なことを書くと、h2要素からbody要素までの祖先をたどっていきh2要素の親または祖先にposition:relativeが指定してあったらそのposition:relativeが指定されている回数分再帰的にoffsetParentを参照して足しあげていかなければならないのであり、ただし注意しなければいけないのはparentOffsetは必ずしもparentElementのことではないということだったり、あるいはabsolute指定のことも考慮していえばより正確にはdocument.bodyからの距離を算出している祖先要素に辿り着くまでということであり、ちなみにうちんとこの場合はh2の親要素に加えてh2の親要素のさらに親と都合2ヶ所でposition:relativeを指定していたので2回ということになる。
h2 {
/* background-position-y以外は省略
最後の1行はタテにセンタリングしたい場合のもので画像サイズと画面サイズの差分 */
background-position-y :
expression(
document.body.scrollTop
- (this.offsetTop +
this.offsetParent.offsetTop +
this.offsetParent.offsetParent.offsetTop)
- (1064 - document.body.clientHeight)/2
);
}
結果としてできあがった指定はダラダラと非常に冗長なものになってしまったわけだが、この文章もダラダラと非常に冗長なものですので読点を句点に置き換えて文末を適宜読み替えてください。
"expression()で背景画像固定"へのTwitter上でのコメントやRT
ツイートを取得できませんでした。