CSSバックグラウンドリピートプロパティ

❮前へ完全なCSSリファレンス次へ❯

例

背景画像を垂直方向にのみ繰り返します。

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このbackground-repeatプロパティは、背景画像を繰り返すかどうか/どのように繰り返すかを設定します。

デフォルトでは、背景画像は垂直方向と水平方向の両方で繰り返されます。

ヒント：背景画像は、 background-positionプロパティに従って配置されます。background-positionが指定されていない場合、画像は常に要素の左上隅に配置されます。

デフォルト値：	繰り返す
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS1
JavaScript構文：	object .style.backgroundRepeat = "repeat-x"

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

注： IE8以前では、1つの要素で複数の背景画像をサポートしていません。

CSS構文

プロパティ値

Value	Description	Play it
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x	The background image is repeated only horizontally
repeat-y	The background image is repeated only vertically
no-repeat	The background-image is not repeated. The image will only be shown once
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round	The background-image is repeated and squished or stretched to fill the space (no gaps)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

背景画像を垂直方向と水平方向の両方で繰り返します（これはデフォルトです）。

body {
background-image: url("paper.gif");
background-repeat: repeat;
}

例

背景画像を水平方向にのみ繰り返します。

body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}

例

背景画像を繰り返さないでください。画像は1回だけ表示されます。

body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}

例

background-repeat：spaceとbackground-repeat：roundの使用：

#example2 {
border: 2px solid black;
padding: 25px;
  background: url("w3css.gif");
background-repeat: space;
}

#example3 {
  border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
  background-repeat: round;
}

例

さまざまな背景プロパティを使用して、「ヒーロー」画像を作成します。

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

CSSリファレンス

CSS Properties