「profile.gif」という画像を用意して、こういうHTMLを書きました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body{ background-color:white; background-image:url("profile.gif"); background-repeat:no-repeat; background-position:center center; } </style> <title>background-positionプロパティの挙動</title> </head> <body> </body> </html>
「body{〜}」内にある一連の「background-なんとか」は上から、
- 背景の色は白
- 背景画像は「profile.gif」
- 背景画像の繰り返し表示はしない
- 背景画像を表示する場所は、表示領域の左右中央、天地中央
という意味です。
そんで実際表示してみると…
IE7だとこうなります。これが期待する表示結果です。
Firefox 3.0.5だと、なんかこうなっちゃうのでした。
「center center」は数値で「50% 50%」と置き換えることもできます。数値をいろいろ変えてみたところ、どうやら左右方向の解釈はきちんとしてくれるものの、天地方向の解釈がおかしいもよう。
「background-position:50% 0%」だと画像は表示領域の上端(かつ左右の中央)に来てこれは正しいのですが、「50% 10%」「50% 20%」…と数値を上げていくと、背景画像がだんだん表示領域の上へ食い込んでいってしまいます。本当は、パーセントの数値が上がるほど、表示領域内での天地位置がだんだん下がっていって、「50% 50%」なら表示領域中央に背景画像が表示され、「50% 100%」にすると下端につくはず。
なのにFirefoxで「background-position:50% 100%」と書くと、背景となる画像が表示領域をはみ出して、見えなくなっちゃうのでした。
こういう話、CSS界やFirefox界では有名だったりして?
でも自分はこういう現象を初めて見ました。原因がおわかりの方がいらしたら、コメント欄やブックマークコメントでお知らせください。
よろしくお願いいたします。
30分もしないうちに追記
コメント欄でid:kensuiさんから、またtwitter上でhttp://kazuhi.to/さん(http://twitter.com/kazuhito/)、およびid:hxxkさん(http://twitter.com/hxxk)からリプライをいただきました。
まとめると
- OperaでもFirefoxと同じ表示になる
- CSSに「html{height:100%}」を追加すると、IEと同じ表示になる
- 理由:<body>〜</body>に中身がない(これを「body要素が空っぽ」という)ため、FirefoxやOperaはbody要素の高さを0として扱う。つまりウィンドウ内の上端に、高さ0の領域があることになる。そう考えると、Firefoxの表示結果は整合性がある
- IEは、表示領域をウィンドウ内全体とする派なのかも?
といった感じでした。
みなさん、反応ありがとうございました!