CSS背景プロパティとは？基本構文と実用的なサンプルコードで解説
CSSの背景プロパティは、要素の背景をスタイリングするために使用される重要な機能です。backgroundプロパティは、要素の背景をまとめて指定できるショートハンド（一括指定）プロパティであり、以下の8つの個別プロパティで構成されています。
背景関連の8つのプロパティ
- background-color：要素の背景色を指定します。
- background-image：背景画像を指定します。
- background-repeat：背景画像の繰り返し方法を指定します。
- background-position：背景画像の表示位置を指定します。
- background-clip：背景の描画範囲を指定します。
- background-size：背景画像のサイズを指定します。
- background-origin：背景画像の基準位置を指定します。
- background-attachment：スクロール時の背景画像の固定方法を指定します。
これらのプロパティを組み合わせることで、単純な背景色の設定から、複数画像を使った高度な背景デザインまで柔軟に実現できます。
構文
CSSのbackgroundプロパティの基本的な構文は次のとおりです。
セレクタ {
background: /*値*/
}
サンプル1：背景画像の基本設定
次の例では、background-image、background-repeat、background-size、background-positionを使用して背景画像を設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
#main {
margin: auto;
width: 300px;
background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#im {
height: 200px;
width: 200px;
background-image: url("https://www.tutorialspoint.com/images/css.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="main">
<div id="im"></div>
</div>
</body>
</html>
表示結果
このコードを実行すると、親要素には領域全体を覆う背景画像（cover）が表示され、子要素には中央に配置された背景画像が表示されます。
サンプル2：複数の背景画像を指定する
background-imageはカンマ区切りで複数の画像を指定できます。次の例では、3枚の背景画像をそれぞれ異なる位置に配置し、background-attachment: fixedによってスクロールしても背景が固定されるように設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini-logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 10%, 40% 40%, 90% 10%;
}
</style>
</head>
<body>
</body>
</html>
表示結果
このコードを実行すると、画面上の異なる位置に3枚のロゴ画像が固定表示され、ページをスクロールしても背景画像は動きません。
まとめ
CSSの背景プロパティを使いこなすことで、Webページの見た目を大きく向上させることができます。まずはbackground-colorやbackground-imageなどの基本的なプロパティから試し、慣れてきたらショートハンドや複数背景の指定にも挑戦してみましょう。
-
CSSのmarginプロパティとは？基本構文から実践的な使い方まで解説
CSSのmarginプロパティとは CSSのmarginプロパティは、margin-top・margin-right・margin-bottom・margin-leftの4つのプロパティをまとめて指定できるショートハンド（一括指定）プロパティです。要素の外側に余白を設けることで、要素同士の間隔やページ端との距離を自由に調整できます。もちろん、各辺ごとに個別のマージンを設定することも可能です。 値の指定ルール marginプロパティでは、指定する値の数によって適用される方向が変わります。 値が1つ：上下左右すべてに同じ値が適用される 値が2つ：1つ目が「上下」、2つ目が「左右」に適用される
-
CSSのbackground-repeatプロパティで背景画像の繰り返しを制御する方法
CSSの background-repeat プロパティは、背景画像が要素内でどのように繰り返されるか（タイル状に敷き詰められるか）を定義するために使用されます。デフォルトでは背景画像は縦横両方向に繰り返されますが、このプロパティを使うことで繰り返しの方向や間隔を細かく制御できます。構文CSSの background-repeat プロパティの基本構文は以下のとおりです。Selector { background-repeat: /*値*/ }主な値repeat：画像を縦・横の両方向に繰り返して表示します（初期値）。repeat-x：水平方向のみ繰り返します。repe