CSS辞典 backgroundプロパティの解説
背景のプロパティをまとめて指定する「backgroundプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
目次
対応ブラウザ
| 初期値 | auto |
| 適用される要素 | すべての要素 |
| モジュール | CSS Backgrounds and Borders Module Level3及びLevel4 |
| 継承 | なし |
概要・使用方法
{ background: -color -image -repeat -position -attachment -clip -size -origin;}「backgroundプロパティ」は、背景に関するプロパティの値をまとめて１か所で記述できるようにするためのもので、それぞれの値を半角スペースで区切って記述します。CSS3では、以下のような規定があります。
- background-sizeプロパティの値を指定する場合は、「background-positionプロパティの値/background-sizeプロパティの値」のように、間に「/」（半角スラッシュ）を入れて指定する（例：center top / 10em 10em）
- 値にボックスの指定（border-box、padding-box、content-box）がある場合、１個の値ならbackground-originとbackground-clipの両方のプロパティに共通の値となり、２個の値がある場合、最初の値はbackground-originプロパティ、次はbackground-clipプロパティの値となる。
ほかに値の記述順の決まりはなく、各プロパティの指定を省略（初期値を使用）することもできます。また、複数の画像を指定する場合は、画像ごとに背景のプロパティをまとめますが、その際には１つ１つの背景をカンマで区切ります。最初に指定した背景の層が一番上（ユーザーに最も近い位置）に配置され、次の背景の層はそれぞれその後ろに順に配置されます。
なお、backgroundプロパティでは背景色（background-color）も指定できますが、background-colorプロパティの値は、最後の背景の層でのみ指定可能です。backgroundプロパティの代わりに、個々のプロパティを使ってそれぞれの値を指定することも可能です。
background-colorプロパティについて
background-imageプロパティについて
background-repeatプロパティについて
background-positionプロパティについて
background-attachmentプロパティについて
background-sizeプロパティについて
background-clipプロパティについて
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>backgroundプロパティ CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.disp{display:inline-block;margin:0.5em;}
.background-all{
color:#ffffff;
background: url("https://kcfran.com/sample/4006205_s.jpg") 20% 0% /200px 200px red no-repeat fixed padding-box;
}
.background-individual{
color:#ffffff;
background-color: red;
background-position: 20% 0%;
background-size: 200px 200px;
background-clip: padding-box;
background-repeat: no-repeat;
background-attachment: fixed;
background-image:url("https://kcfran.com/sample/4006205_s.jpg");
}
</style>
</head>
<body>
<div class="disp">
<div class="background-all"><h1>background</h1></div>
<div class="background-individual"><h1>background関連個別指定</h1></div>
</div>
</body>
</html>chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
