CSS1 テストスイート: 5.3.6 background-position

下記のテキストに適用されるスタイル宣言は、つぎのとおりです。

BODY {background-image: url(bg.gif); background-position: right top;
      background-repeat: no-repeat;}
.one {background-image: url(bg.gif); background-position: center;
      background-repeat: no-repeat; background-color: aqua;}
.two {background-image: url(bg.gif); background-position: 50% 50%;
      background-repeat: no-repeat; background-color: aqua;}
.three {background-image: url(bg.gif); background-position: bottom right;
        background-repeat: no-repeat; background-color: aqua;}
.four {background-image: url(bg.gif); background-position: 100% 100%;
       background-repeat: no-repeat; background-color: aqua;}
.five {background-image: url(bg.gif); background-position: 0% 50%;
       background-repeat: no-repeat; background-color: aqua;}
.six {background-image: url(bg.gif); background-position: 75% 25%;
       background-repeat: no-repeat; background-color: aqua;}
.seven {background-image: url(bg.gif); background-position: 20px 20px;
       background-repeat: no-repeat; background-color: aqua;}

この文書には、右上隅に小さい緑色の画像が1個だけあるはずです。

この段落には、ちょうど真ん中に小さい緑色の画像が1個だけあるはずです。 すなわち、画像の中心が段落の中心に固定されているはずです。 背景色により段落の縁を決定しやすくなっていますから、中心の計算が可能でしょう。

この段落には、ちょうど真ん中に小さい緑色の画像が1個だけあるはずです。 すなわち、画像の中心が段落の中心に固定されているはずです。 背景色により段落の縁を決定しやすくなっていますから、中心の計算が可能でしょう。

この段落には、右下隅に小さい緑色の画像が1個だけあるはずです。 すなわち、画像の右下隅が段落の右下隅に固定されているはずです。 背景色により段落の縁を決定しやすくなっていますから、中心の計算が可能でしょう。

この段落には、右下隅に小さい緑色の画像が1個だけあるはずです。 すなわち、画像の右下隅が段落の右下隅に固定されているはずです。 背景色により段落の縁を決定しやすくなっていますから、中心の計算が可能でしょう。

この段落には、ちょうど左中央に小さい緑色の画像が1個だけあるはずです。 すなわち、画像の左中央が段落の左中央に固定されているはずです。 背景色により段落の縁を決定しやすくなっていますから、中心の計算が可能でしょう。

この段落には、要素を横に75%、下に25%進んだところに小さい緑色の画像が1個だけ置かれているはずです。 背景色により段落の縁を決定しやすくなっていますから、これがすべてそのとおりかどうかを決定する助けとなるはずです。 そして余分なテキストが、このテストを評価しやすくするのに充分なだけ要素を長くしているはずです。

この段落には、左上側の隅の20ピクセル下で20ピクセル左のところに小さい緑色の画像が1個だけ置かれているはずです。 すなわち、画像の左上側の隅が、要素の左上側の隅の20ピクセル下で20ピクセル左になるはずです。 背景色により段落の縁を決定しやすくなっていますから、これがすべてそのとおりかどうかを決定する助けとなるはずです。 そして余分なテキストが、このテストを評価しやすくするのに充分なだけ要素を長くしているはずです。