CSS 背景画像の繰り返し
CSS background-repeat
デフォルトでは、background-imageプロパティは、水平方向と垂直方向の両方で画像を繰り返します。
一部の画像は、水平方向または垂直方向にのみ繰り返す必要があります。そうしないと、次のように奇妙に見えます。
上の画像が横方向にのみ繰り返される場合 (background-repeat: repeat-x;)、背景が良くなります。
ヒント：画像を縦方向に繰り返すには、次のように設定します。background-repeat: repeat-y;
CSS background-repeat: no-repeat
背景画像を1回だけ表示することも、background-repeatプロパティで指定します。
上記の例では、背景画像はテキストと同じ場所に配置されています。テキストの邪魔にならないように、画像の位置を変更したいと考えています。
CSS 背景位置
background-positionプロパティは、背景画像の位置を指定するために使用されます。
例
背景画像を右上隅に配置します。
body{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
CSSの背景の繰り返しと位置のプロパティ
|
プロパティ |
説明 |
|---|---|
| 背景位置 | 背景画像の開始位置を設定します |
| バックグラウンドリピート | 背景画像の繰り返し方法を設定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。