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>

それは次の結果を生成します-