REDLINE MAGAZINE | overflow を使用したボックス背景のことREDLINE MAGAZINEトップページへ

すべてのエントリを見る

overflow を使用したボックス背景のこと

幅、高さ、overflow:auto;を指定したボックスの背景に画像を指定した場合、IEでだけ背景の表示が変。やりたかったことは固定サイズのボックスに背景画像を指定して中身がそのボックスの高さより溢れたらスクロールしてほしいという内容。とりあえずサンプルあげてみます。

>>サンプル1(背景を指定してno-repeatを指定)

【CSSソース】

#sample{
	width:400px;
	height:150px;
	background:url(img/xxx.jpg) no-repeat;
	overflow:auto;
	border:1px solid #f00;
	margin:20px auto;
	}

Firefox、NN、Opera、Safari(win)では意図どおりにボックスがスクロールしても背景がリピートせずに固定される。でもIE6、7だとスクロールに合わせて背景も動いちゃう。下記はそのキャプチャ。

キャプチャ・IEでの表示

もしかして私間違って覚えてた?

ボックスに幅、高さを指定して背景を入れる場合、背景をリピートさせないためにはno-repeatだけでいいと思ってたけどoverflow:auto;を使う場合、もしかして「fixed」とか入れなきゃならなかった?とか思って入れてみた。

>>サンプル2(背景を指定してno-repeatとfixedを指定)

【CSSソース】

#sample{
	width:400px;
	height:150px;
	background:url(img/071212_01.jpg) no-repeat fixed;
	overflow:auto;
	border:1px solid #f00;
	margin:20px auto;
	}

IE6ではうまくいったけど、おおっと・・・他ブラウザで背景が飛んでいってる。ディスプレイを小さくしてみたら背景の一部がボックスの中に表示されるということは、「fixed」で固定される基準点が違うっぽいなと思ってググってみたらこちらのページを発見。

>>スタイルシート[CSS]/ボックス/背景画像をスクロールさせない - TAG index

上記ページの下のほうの「fixedを指定する場合の注意点」という項目に各ブラウザごとの基準となる位置がまとめられてました。

ふむふむ。IE6ではその要素に対して背景が固定される(だから上のサンプル2ではうまくいってるのね)が、他ブラウザ(IE7含む)ではウィンドウを基準に固定するから求める結果が得られない、と。「fixed」ってhtmlやbody要素向けの指定なんすね。今まであんまり使う機会なかったから知らなかったよ・・・とほほ。

てかweb標準の教科書にもちゃんと書いてあった。その要素に対して固定されるのではなく、ブラウザの表示領域に対して固定される点に注意。(P.212より引用) うむ。勉強になりますた。

ならばどうしてくれようか。

とりあえずIEさんが個性的なのはよく分ったけどシェア的に無視できる相手でもないので、とりあえずIEさんには上のとおり「fixed」を指定して固定を保ってもらおう。その他のブラウザについては子供セレクタでも使って「no-repeat」で表示する。

IE7も中途半端にうっとーしい奴だった

これでOKだと思ってたらIE7先生もまたクセモノだった。この人「fixed」を指定した際は他ブラウザに挙動を合わせて表示領域を基準にするくせに、「no-repeat」だけだとIE6と同じように背景までスクロールしやがる。八方美人すぎるぞ。

IE7で「fixed」を指定した上で位置固定の指定でも入れようかとも思ったけど、表示サイズによって変わるやんね。リピートさせられる画像なら問題ないんだけど上に置いたサンプルみたいにリピートしがたい画像なのでビミョー。・・・どうしたらいいの?まじで。IE6と他ブラウザ向けに指定を振り分けた後、IE7のために大きめの背景画像を用意して「no-repeat left bottom」とかで表示位置をコントロールするくらいしか思いつかないんだけど。なんかスマートな方法ないかなぁ・・・。根本的に何か間違ってるのかな。(※今使ってるIE7、スタンドアローン版なので、正規版では挙動が違うかもです。)

<< 半透明ボックスに関するメモ | CSS3 :target擬似クラスでイメージギャラリー >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/176

コメント (5)

#sampleのボックスの外にもう一個ボックスを作りそいつに背景つければ一応いけますね

こんにちわ。コメントありがとうございました。
そうなんですよねぇ。divで囲めばなんとでもなるんですが、背景を固定したいがためにdivを増やして入れ子にすることに対してビミョーな抵抗を感じておりますです><
別に増やしても何か問題があるわけでもないんですが、シンプルなソースのまま活かしたかったりとかw でもそれって自己満足っすよね。

その気持ちはすっごいわかります。
いろいろ試したんですが、fixed使う限り位置情報が問題になり、逆にCSSに余計なソースを使ってしまいそうでorz

そうなんですよね。確かに無駄な抵抗(?)をするとCSSソースが汚れてきちゃいますよね。悩ましいところっす><
今回はそのCSS触るのは多分今後も自分だけなんで、汚れても自分が理解できてりゃ良かったりもするというのもあるんですけど、やっぱhtmlありきのCSSだと思うんで、どっちがシンプルな方がいい?って言われたらhtmlを選んじゃいますね。時間がなかったりしたら勢いでdiv追加しそうですけどww
つーか、こういうのって本来はきっとブラウザを作ってる側で解決すべき事で、サイトを制作する側にまで降りてきてるのがおかしいとかも若干思ったりして。

このスレマジで助かりました。。。
もう1個divで背景画像用にぶちこめばいいんすね。

どのサイトにもこの件が取り上げられていなかったのでマジで感謝です。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。