CSSのbackground-repeatプロパティで背景画像の繰り返しを制御する方法
CSSの background-repeat プロパティは、背景画像が要素内でどのように繰り返されるか（タイル状に敷き詰められるか）を定義するために使用されます。デフォルトでは背景画像は縦横両方向に繰り返されますが、このプロパティを使うことで繰り返しの方向や間隔を細かく制御できます。
構文
CSSの background-repeat プロパティの基本構文は以下のとおりです。
Selector {
background-repeat: /*値*/
}主な値
- repeat：画像を縦・横の両方向に繰り返して表示します（初期値）。
- repeat-x：水平方向のみ繰り返します。
- repeat-y：垂直方向のみ繰り返します。
- no-repeat：画像を1回だけ表示し、繰り返しません。
- space：領域内に収まる範囲で繰り返し、余白は均等に配分されます。画像は切り取られません。
- round：領域に収まるように画像を拡大・縮小しながら繰り返します。
使用例1：repeat を指定した場合
次の例では、background-repeat: repeat; を指定して、背景画像がページ全体に繰り返し表示される様子を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/images/microsoftproject.png");
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>出力結果
上記のコードを実行すると、次のような表示になります。
使用例2：space repeat を指定した場合
次の例では、リスト要素に対して background-repeat: space repeat; を指定しています。第1の値「space」が水平方向、第2の値「repeat」が垂直方向の繰り返し方を表しており、水平方向では画像同士の間隔が均等に調整されます。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
background-image: url("https://www.tutorialspoint.com/images/questions-answers.png");
background-repeat: space repeat;
}
</style>
</head>
<body>
<h2>Tutorials</h2>
<ul>
<li>Java</li>
<li>C#</li>
<li>Etherum</li>
<li>DBMS</li>
<li>OS</li>
</ul>
</body>
</html>出力結果
上記のコードを実行すると、次のような表示になります。
まとめ
background-repeat プロパティを活用することで、背景画像の繰り返し方法を柔軟にコントロールできます。単一の値だけでなく、「space repeat」のように2つの値を組み合わせて水平方向と垂直方向それぞれに異なる設定を行うことも可能です。Webページのデザインにおいて、背景画像を美しく整えるための重要なプロパティなので、ぜひ使いこなしましょう。
-
RGBAを使ったCSSの透明度設定方法をわかりやすく解説
CSSで要素の透明度を表現する場合、rgba() 関数を使うのが一般的です。RGBにアルファチャンネル（alpha）を加えたこのカラーモデルでは、第4パラメータで色の不透明度（opacity）を細かく指定できます。 RGBAカラーの基本 rgba() は次の4つの値で構成されます。 R（赤）・G（緑）・B（青）：それぞれ0〜255、または0〜100%の数値で指定します。 A（アルファ／透明度）：0.0（完全な透明）〜1.0（完全な不透明）までの小数で指定します。例えば「0.5」なら半透明になります。 通常の rgb() では透明度を扱えませんが、rgba() を使えば背景色だけを半透明にで
-
CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説
HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ