CSS背景画像の繰り返し
CSSの背景-繰り返し
デフォルトでは、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;
CSSバックグラウンドリピート：ノーリピート
背景画像を1回だけ表示することも、background-repeatプロパティで指定されます。
例
背景画像を1回だけ表示します。
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
上記の例では、背景画像はテキストと同じ場所に配置されています。テキストの邪魔にならないように、画像の位置を変更したいと思います。
CSSの背景位置
このbackground-positionプロパティは、背景画像の位置を指定するために使用されます。
例
背景画像を右上隅に配置します。
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}