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

CSSのbackground-repeatプロパティの使い方をわかりやすく解説

background-repeatプロパティは、背景画像の繰り返し方(リピートの有無や方向)を制御するために使用されるCSSプロパティです。画像を繰り返し表示したくない場合は、値としてno-repeatを指定します。この場合、背景画像はページ上に1回だけ表示されます。

background-repeatで使える主な値

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

  • repeat — 背景画像を縦・横の両方向に繰り返して表示します(デフォルト値)。
  • repeat-x — 水平方向のみ繰り返して表示します。
  • repeat-y — 垂直方向のみ繰り返して表示します。
  • 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>

まとめ

background-repeatプロパティを活用することで、背景画像の表示方法を柔軟にコントロールできます。特にno-repeatは、ロゴやバナーなど繰り返しを避けたい画像を表示する際によく使われる値です。また、background-positionプロパティと組み合わせることで、画像の表示位置まで細かく調整できるため、実務でも頻繁に利用されます。

  1. CSSのborder-left-widthプロパティで左ボーダーの幅を指定する方法

    CSSのborder-left-widthプロパティは、要素の左側の境界線（ボーダー）の太さを変更するために使用します。このプロパティを使うことで、左ボーダーだけの幅を個別に調整できます。使用例以下のコードは、border-left-widthプロパティを実装した実際の例です。<html>    <head>    </head>    <body>       <p style = "border-left-width:6px;border

  2. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none