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

CSSのbackground-repeatで背景画像を繰り返し表示する方法

background-repeatプロパティとは

CSSにおける背景の繰り返し設定は、Webページ上で背景画像をどのように繰り返し表示するかを指定するためのものです。この設定には background-repeat プロパティを使用します。

指定できる主なプロパティの値は以下のとおりです。

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
  • repeat：水平・垂直の両方向に画像を繰り返します（デフォルト値）
  • repeat-x：水平方向にのみ画像を繰り返します
  • repeat-y：垂直方向にのみ画像を繰り返します
  • no-repeat：画像を繰り返さず、1回だけ表示します
  • initial：プロパティを初期値に戻します
  • inherit：親要素の設定値を継承します

例1：repeat-xで水平方向に繰り返す

まずは、背景画像を水平方向に繰り返し表示する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: repeat-x;
   background-color: blue;
   color: white;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力結果

CSSのbackground-repeatで背景画像を繰り返し表示する方法

上記のコードでは background-repeat: repeat-x; を指定しているため、背景画像がページ上部の水平方向に沿って繰り返し表示され、背景色には青が適用されています。

例2：repeat-yで垂直方向に繰り返す

次に、背景画像を垂直方向に繰り返し表示する別の例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: repeat-y;
   background-color: orange;
   color: white;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力結果

CSSのbackground-repeatで背景画像を繰り返し表示する方法

こちらの例では background-repeat: repeat-y; を指定しているため、背景画像がページ左端の垂直方向に沿って繰り返し表示され、背景色にはオレンジが適用されています。

まとめ

background-repeat プロパティを使いこなすことで、背景画像の表示方法を柔軟にコントロールできます。タイル状に敷き詰めたい場合は repeat、バナーのように横一列に並べたい場合は repeat-x、縦一列に並べたい場合は repeat-y を選択するとよいでしょう。

  1. CSS背景プロパティとは？基本構文と実用的なサンプルコードで解説

    CSSの背景プロパティは、要素の背景をスタイリングするために使用される重要な機能です。backgroundプロパティは、要素の背景をまとめて指定できるショートハンド（一括指定）プロパティであり、以下の8つの個別プロパティで構成されています。 背景関連の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