backgroundプロパティの使い方まとめ【css】
backgroundプロパティは、背景関連のプロパティをまとめて指定できるショートハンドです。
{ background : -color -image -repeat -position -attachment -clip -size -origin; }
それぞれの値は半角スペースで区切って指定します。指定する順番は任意でOKですが、background-sizeはbackgroundpositionの後に「/」で区切って指定するのがルールです。
各プロパティについて
background-position
背景画像の表示位置を指定します。
background-position: left 50% top 50px;
縦方向、横方向の2つの値を指定できます。
background-size
背景画像のサイズを指定します。
指定したサイズいっぱいに画像を表示したい場合
.sample{
background-image:url(../img_sample.jpg);
background-size:contain;
width:100%;
height:400px;
}
containは、背景画像の縦横比率を保ったまま表示します。背景配置領域の縦横の小さい方が基準になります。
背景画像の縦横比率を保ったまま表示したい場合は「cover」を使います。coverは背景配置領域の縦横の大きい方が基準になります。
background-repeat
背景画像の繰り返し方法を指定します。
- repeat（初期値）
背景画像を敷き詰めます。
- repeat-x
背景画像を水平方向に敷き詰めます。
- repeat-y
背景画像を垂直方向に敷き詰めます。
- no-repeat
リピートなしで1つだけ表示します。よく使います。
background-attachment
- fixed
指定すると、スクロールしても背景画像が追従します。
background-originとbackground-crip
正直あまり使わないbackground-originとbackground-cripですが、一応解説です。
- background-origin：背景画像の配置領域
- background-crip：背景の配置領域そのもの
- border-box
ボーダー領域から背景が配置されます。表示はボーダーの奥になります。
- padding-box
ボーダー領域には背景が表示されません。パディング領域からの表示になります。
- content-box
パディング領域には表示されません。
一括で指定できるので覚えておくと便利な記述でした。よかったら参考にしてください。
関連記事
