background-attachment : fixed ;

背景画像を2つ固定配置する……Win IE6 の background-attachment : fixed

疑似的回避策

ソース

<body>
<div class="div1">
<h1>---</h1>
内容
</div>
</body>

スタイルシート

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 ;
}

body と div.div1 の背景画像を入れ替えて、真ん中の画像を body に、左側の連続画像を div.div1 に持ってきた。Win IE6 では、左側の画像がスクロールしてしまうが、まあ許容できる範囲かと。

固定できる背景画像は、1つだけ。2つ配置する場合は、どちらか一方の背景画像は縦に連続する必要がある。単独の画像を body の background-image とし、連続する方を body の子要素の background-image として、疑似的に回避する。


奥付

書いた人

last modified 2002-06-23T03:35:09+09:00 カナかな団首領