オープンソースの画像生成AIをセットアップから使い方まで解説する『Stable Diffusion AI画像生成ガイドブック』(ソシム刊)発売中(→本のサポートページ

Firefox 3.xでCSS「background-position」プロパティの解釈が変?

「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だとこうなります。これが期待する表示結果です。

f:id:Imamura:20090121203703p:plain

Firefox 3.0.5だと、なんかこうなっちゃうのでした。

f:id:Imamura:20090121203702p:plain

「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要素が空っぽ」という)ため、FirefoxOperaはbody要素の高さを0として扱う。つまりウィンドウ内の上端に、高さ0の領域があることになる。そう考えると、Firefoxの表示結果は整合性がある
  • IEは、表示領域をウィンドウ内全体とする派なのかも?

といった感じでした。

みなさん、反応ありがとうございました!