背景画像を2つ固定配置する……Win IE6等における background-attachment : fixed
そのお勉強
<body> <div class="div1"> <h1>---</h1> 内容 </div> </body>
body{
background-color : white ;
background-image : url(../../common/css_images/marker-v_check.png) ;
background-repeat : repeat-y ;
background-position : top left ;
background-attachment : fixed ;
margin : 0 ;
padding : 0 ;
}
div.div1{
background-color : transparent ;
background-image : url(../../Images/home50.jpg) ;
background-repeat : no-repeat ;
background-position : center center ;
background-attachment : fixed ;
margin : 0 ;
padding : 1em 50px 100% 50px ;
}
つまりは body の背景左側にチェックボックス画像（marker-v_check.png）を縦並びで配置、固定。div.div1 の背景真ん中にホーム画像（home50.jpg）を配置して、固定。
MacIE5、Mozilla に置いてはホーム画像（home50.jpg）の位置がウィンドウ（表示領域）のちょうど真ん中に配置されるが、WinIE6 等では、div.div1 の真ん中、つまり、div.div1 には padding-bottom 100% を与えているので、要素としての高さが 200% 超になると思われるのだが、ちょうどその半分程の位置に配置されるのである。
結果、真ん中のホーム画像（home50.jpg）は、ウィンドウ（表示領域）の下の方に位置することになり、なおかつスクロールしてしまうのである。
これを避けるには、body と div.div1 の背景画像を入れ替えてやれば、疑似的に解決することは出来る。【参考ページ】
body{
background-color : white ;
background-image : url(../../Images/home50.jpg) ;
background-repeat : no-repeat ;
background-position : center center ;
background-attachment : fixed ;
margin : 0 ;
padding : 0 ;
}
div.div1{
background-color : transparent ;
background-image : url(../../common/css_images/marker-v_check.png) ;
background-repeat : repeat-y ;
background-position : top left ;
background-attachment : fixed ;
margin : 0 ;
padding : 1em 50px 100% 50px ;
}
但し、この場合左側の画像によっては、スクロールしていることが分かるし、左側画像の右端は中央画像の左端よりも左側になければならない、という制約もある。（重なってしまうと、中央画像の上に左側画像が来てしまう。まあ、気にしないようなものなら気にしないけれど。）
或いは、
div.div1{
background-color : transparent ;
background-image : url(../../Images/home50.jpg) ;
background-repeat : no-repeat ;
background-position : 50% 300px ;
background-attachment : fixed ;
margin : 0 ;
padding : 1em 50px 100% 50px ;
}
上記のように、background-position を 左から 50% 上から 300px というように指定するという手もある。こっちの方が一般的だったか…。
これでは、fixed にはならないけれど。
実際のところ、div.div1 の高さは、ウィンドウ（表示領域）よりも遥かに大きいはずで、その中心に背景画像を配置するWinIE6 等は正しい解釈をしている。…のだと思う。CSS2 の邦訳を読んだけどよく分かりませんでした。なは。
- 826 ：Name_Not_Found ：02/06/21 04:56 ID:bAKIkY5I
- http://www.aboutworks.com/shokodei/diary/doc/zettai.html
これも構成員？やっちゃってる。
うーむ、しまった。何かをやってしまったらしい。何をやっちゃったんでしょーか。教えてください。
ちなみに、構成員ではないと思いますがー。
さらにちなみに、公開プロキシー規制中とかで、私2ちやんねるには書き込めないのです。はい。
- 827 ：Name_Not_Found ：02/06/21 22:42 ID:1rgFY8lm
- >>826
そもそもファイル名がやっちゃってるんですが・・・。
ああ、なるほど。ファイル名がマズかったとですか。ローマ字ファイル名はお嫌いですか。
そうですねえ。日本語ファイル名が使えれば、それに越したことはないんですが、生憎、日本語ファイル名は駄目らしいのです。いやいや、ファイル名なんて、他と区別がつけばいいのだから、数字と記号の羅列で良いといえば、それはそーですけれど、ファイル名から中身が想像できないのは不便ですし、ファイル名を英語表記しても好いんですが（ background-attachment_fixed.html とか）、下手に綴りを間違えると、それはそれで格好悪いということで、ローマ字で誤魔化したのです。それにしても、「 zettai.html 」は名は体を表していないファイル名ですねえ。
もともと、{ position : absolute ; } の練習をしていたので、「 zettai.html 」なんですけど、途中で気が変わって { background-attachment : fixed ; }の練習になってしまったのですが、面倒なのでファイル名はそのままということです。以後、精進します。
というか、そもそも
ということは、他にもやっちゃっていることがあるんですね。困ったね。
- 828 ：Name_Not_Found ：02/06/21 22:53 ID:j1SjXukE
- そりゃ娘が二人もいるくらいだから
やるべきことは毎晩やってるんでしょう
そうとも限らないが。
あ、『詳解 HTML & XHTML & CSS 辞典』に、background-attachment プロパティで表示位置が固定されている場合は、ウィンドウに対する位置
になると書いてあるじゃん。ということは、ウインドウの真ん中に配置・固定されるのが正解なのではないかしら。
というわけで、ファイル名を background_fixed.html にしました（ background-attachment_fixed.html にしようとしたら、長すぎた）。
背景画像が指定される場合，この特性は，背景画像が表示域に関して固定されるのか('fixed')，文書とともにスクロールされるのか('scroll')を指定する。
とあるが、また、
利用者エージェントは'fixed'を'scroll'として処理してもよい。しかし, 文書作成者が画像を'fixed'をサポートするブラウザだけに提供する方法がないため， 利用者エージェントは，少なくともHTML要素及びBODY要素については，'fixed'を正確に解釈することを推奨する。
とも書いてある。ということで、
- 830 ：Name_Not_Found ：02/06/22 13:17 ID:3tA5xxc/
- この程度の問題は
瞬時に「MacIE5もMozillaもWinIE6も正解」
と答へられなければCSS2使い失格。
ということらしい。
Win IE6 の解釈も正解ということになれば、というより現状ユーザーのとっても多い UA で 2 つの背景画像を固定して配置するような表現をするためには、HTML 要素と BODY 要素に背景画像を配置すれば好いのではないか、と思ったが、たしかWin IE6 では駄目だったような【参考ページ2】（CSS2 では正確に解釈することを推奨
しているだけだから、間違いではないのだと思う）。もっとも、HTML 要素と BODY 要素の両方に背景画像を配置したりすると、Mozilla のパフォーマンスが極端に落ちるし。
Win IE6 において、連続しない 2 つの背景画像を固定して配置するのは、疑似的にも難しいと。どちらかが縦に連続するような背景画像でなければならないとメモしておく。