CSS 背景繰り返し

CSS background-repeat

デフォルトでは、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 background-repeat: no-repeat

background-repeat 属性は背景画像を一度だけ表示するように指定できます：

例

背景画像は一度だけ表示される：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

自分で試してみる

前の例では、背景画像とテキストが同じ位置に配置されています。画像がテキストに多く干渉するのを避けるために、画像の位置を変更したいです。

CSS background-position

background-position 属性は背景画像の位置を指定するために使用されます。

例

背景画像を右上隅に配置する：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

自分で試してみる