はじめに
CSSのbackgroundプロパティは、要素の背景に関するさまざまなスタイルプロパティをまとめて指定するために使用されます。以下に、backgroundプロパティの一般的な使用法とサブプロパティについて説明します。
いつもだとまとめられたbackgroundプロパティではなく、background-colorやbackground-repeatなどサブプロパティに分けて使用するのですが、サイトによってはbackgroundプロパティでまとめられているサイトもあり、自分自身がbackgroundプロパティの指定の順番を忘れてしまうため、備忘録的な意味でも今回の記事を更新をしようと思いました。
backgroundプロパティの一般的な構文
backgroundプロパティの一般的な構文は次の通りです。
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip];例
まとめて指定したものと分けて指定したものです。
.bg {
background: #333 url('background.jpg') no-repeat fixed center/cover center border-box;
}
.bg {
background-color: #333;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-origin: center;
background-clip: border-box;
}backgroundプロパティの各サブプロパティの説明
background-color
要素の背景色を指定します。色の名前、16進数値、RGB、RGBA、HSL、HSLAなどで指定できます。
background-image
背景に使用する画像のURLを指定します。複数の画像をカンマ区切りで指定することもできます。
background-repeat
背景画像の繰り返し方法を指定します。例えば、repeat（初期値）、repeat-x、repeat-y、no-repeatなどがあります。
background-attachment
背景画像のスクロールとの関連性を指定します。一般的にはscroll（初期値）やfixedなどがあり、fixedを指定すると画面スクロールに関係なく固定されます。
background-position
背景画像の位置を指定します。例えば、center center、top right、50% 0などで指定します。
background-size
背景画像のサイズを指定します。auto、cover、contain、具体的な幅と高さなどが指定できます。
background-origin
背景画像の位置の起点を指定します。例えば、padding-box、border-box、content-boxなどがあります。
background-clip
背景が適用される範囲を指定します。例えば、border-box、padding-box、content-boxなどがあります。
まとめ
今回はbackgroundプロパティについて記事にしました。特にまとめて指定している場合は順番を忘れてしまうので、こちらを見て思い出していただけたらと思います。
ただ分けて指定した方が順番は関係ないので、特に理由がなければまとめて指定をする必要はないと思います。
