JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのbackground-repeatプロパティで背景画像の繰り返しを制御する方法

CSSで背景画像の繰り返しを設定する

CSSでは、background-repeatプロパティを使うことで、背景に表示した画像の繰り返し（リピート）を細かくコントロールできます。

背景画像を繰り返したくない場合は、background-repeatプロパティにno-repeatという値を指定します。この場合、画像は1回だけ表示されます。値を指定しない場合、デフォルトではrepeatが適用され、ページ全体にタイル状に敷き詰められる点に注意しましょう。

サンプルコード

以下のコードを実行して、background-repeatプロパティの動作を確認してみましょう。

<html>
   <head>
      <style>
         body {
            background-image: url("/images/seaborn-4.jpg?v=2");
            background-repeat: repeat;
         }
      </style>
   </head>
   <body>
      <p>Tutorials Point</p>
   </body>
</html>

主な指定できる値

background-repeatプロパティには、以下のような値を指定できます。

  • repeat：画像を縦・横方向に繰り返して敷き詰めます（初期値）。
  • no-repeat：画像を1回だけ表示し、繰り返しを行いません。
  • repeat-x：横方向にのみ繰り返します。
  • repeat-y：縦方向にのみ繰り返します。
  • space：画像同士が重ならず、隙間を空けて繰り返します。
  • round：領域のサイズに合わせて画像を伸縮しながら繰り返します。

用途に応じてこれらの値を使い分けることで、デザインに合わせた柔軟な背景表現が可能になります。

  1. CSSのbackgroundショートハンド（一括指定）プロパティの使い方を解説

    CSSのbackgroundショートハンド（一括指定）プロパティは、要素の背景をまとめて定義するための便利なプロパティです。1つの宣言で複数の背景関連プロパティを同時に設定できるため、コードが簡潔になり、可読性も向上します。backgroundショートハンドに含まれる個別プロパティbackgroundショートハンドを使うことで、以下の8つの個別プロパティを一度に指定できます。background-color：背景色background-image：背景画像background-repeat：画像の繰り返し方法background-position：画像の表示位置background-clip：

  2. CSSのbackground-repeatプロパティで背景画像の繰り返しを制御する方法

    CSSの background-repeat プロパティは、背景画像が要素内でどのように繰り返されるか（タイル状に敷き詰められるか）を定義するために使用されます。デフォルトでは背景画像は縦横両方向に繰り返されますが、このプロパティを使うことで繰り返しの方向や間隔を細かく制御できます。構文CSSの background-repeat プロパティの基本構文は以下のとおりです。Selector {    background-repeat: /*値*/ }主な値repeat：画像を縦・横の両方向に繰り返して表示します（初期値）。repeat-x：水平方向のみ繰り返します。repe