Standards mode での背景画像の位置とボーダー
上記イメージ（50 × 50px）を背景画像に指定してします。
1
上記は width : 50px ; height : 50px ; background-position : top left ; border : 1px solid red ;
2
上記は width : 50px ; height : 50px ; background-position : top left ; border : 20px solid red ;
3
上記は width : 50px ; height : 50px ; background-position : center right ; border : 20px solid red ;
4
上記は width : 50px ; height : 50px ; background-position : center right ; border-left : 20px solid red ; border-right : 20px solid red ;
5
上記は width : 50px ; height : 50px ; background-position : center center ; border : 20px solid red ;
MacIE5.14 で閲覧した場合、背景画像の位置がボーダー外側（境界辺）から計算されて配置されているので、背景画像の上下 20px、左右 20px がボーダーに隠れて見えなかったりする。
これに対し Mozilla や WinIE6 とかは、ボーダー内側（パディング辺）から計算されて配置されているので、背景画像は中心に収まる。【Colors and backgrounds】の通りで、Mozilla や WinIE6 とかが正しい。
のだが、上の見出し「検証」を見て欲しい。
h3{
margin : 2em 100px 0 0 ;
padding : 0.25em 0 0.25em 0.5em ;
font-size : 150% ;
font-weight : normal ;
color : #333333 ;
border-left : 20px solid red ;
border-right : 20px solid red ;
background-color : white ;
background-image : url(../../Images/back50.jpg) ;
background-repeat : no-repeat ;
background-position : center right ;
}
というようなスタイルなのだが、WinIE6 でも背景画像が右ボーダーに埋もれてしまう。これは、width 、若しくは height を指定することにより回避することが出来る。