デフォルトでは、background-image 属性は画像を水平方向と垂直方向の両方で繰り返します。
一部の画像は水平または垂直にのみ繰り返す必要があります。そうしないと、次のように奇妙に見えます。
body {
background-image: url("gradient_bg.png");
}
上の画像を水平方向にのみ繰り返すと、背景がより良く見えます (background-repeat:repeat-x;):
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
ヒント: 画像を縦方向に繰り返すには、background-repeat:repeat-y; を設定してください。
background-repeat 属性では、背景画像を 1 回だけ表示するように指定することもできます。
背景画像は 1 回だけ表示されます:
body {
background-image: url("tree.png");
background-repeat: no-repeat;
}
上の例では、背景画像がテキストと同じ位置に配置されています。 画像がテキストの邪魔にならないように画像の位置を変更したいと思います。
background-position 属性は、背景画像の位置を指定するために使用されます。
背景画像を右上隅に配置します。
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}