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

背景画像の繰り返しを制御するには？CSSのbackground-repeatプロパティの使い方

背景に表示した画像の繰り返し（リピート）方法を制御したい場合は、CSSのbackground-repeatプロパティを使用します。例えば、画像を繰り返し表示したくない場合は値に「no-repeat」を指定します。この場合、背景画像は画面上に一度だけ表示されます。

background-repeatで使える主な値

  • repeat：初期値。縦・横方向に画像を繰り返して表示します。
  • no-repeat：画像を繰り返さず、1回だけ表示します。
  • repeat-x：水平方向（横）のみ繰り返します。
  • repeat-y：垂直方向（縦）のみ繰り返します。
  • space：領域内に収まるように間隔を空けて繰り返します。
  • round：領域に収まるよう画像を伸縮させながら繰り返します。

サンプルコード

以下のコードを実行すると、background-repeatプロパティの基本的な動作を確認できます：

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>
   <body>
      <p>Tutorials Point</p>
   </body>
</html>

コードの解説

このサンプルでは、body要素に対して「css.jpg」という画像を背景として設定しています。background-repeat: repeat;が指定されているため、画像はページ全体にタイル状に敷き詰められて表示されます。もし画像を1回だけ表示したい場合は、値を「no-repeat」に変更してください。

また、背景画像の表示位置を調整したい場合は「background-position」プロパティ、サイズを変更したい場合は「background-size」プロパティと組み合わせることで、より柔軟なデザインを実現できます。

  1. CSSのborder-imageプロパティ完全ガイド｜画像ボーダーの使い方とブラウザごとの注意点

    CSSのborder-imageプロパティは、初めて触れるときには少し理解しづらいプロパティの一つです。この記事では、border-imageプロパティとは何か、その基本的な使い方、そしてブラウザごとの特有の挙動について詳しく解説します。 borderプロパティのおさらい まず前提として、CSSの学習を進めていれば「border」プロパティはすでにご存じでしょう。おさらいとして、borderは要素の周囲に枠線を指定するためのショートハンド（一括指定）プロパティで、次のような構造を持っています。 border: 2px /* 幅 */ dashed /* スタイル

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

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