Css-background-repeat
提供:Dev Guides
CSS-バックグラウンドリピート
説明
background-repeatは、背景画像が繰り返される方向(ある場合)を定義します。
可能な値
- repeat -背景画像を水平軸と垂直軸の両方に沿って繰り返します。
- repeat-x -背景画像をx軸に沿って繰り返します。
- repeat-y -背景画像をy軸に沿って繰り返します。
- no-repeat -背景画像がまったく繰り返されないようにします。
に適用されます
すべてのHTML要素。
DOM構文
object.style.backgroundRepeat = "Any of the above values";
例
以下は、画像が小さい場合に背景画像を繰り返す方法を示す例です。 画像を繰り返したくない場合は、_background-repeat_プロパティに_no-repeat_値を使用できます。この場合、画像は1回だけ表示されます。
デフォルトでは、_background-repeat_プロパティには_repeat_値があります。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
それは次の結果を生成します-
以下は、背景画像を垂直に繰り返す方法を示す例です。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
それは次の結果を生成します-
以下は、背景画像を水平方向に繰り返す方法を示す例です。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
それは次の結果を生成します-