2020.4.27
html-css

backgroundプロパティの使い方まとめ【css】

  • CSS
  • テクニック
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

ボーダー領域から背景が配置されます。表示はボーダーの奥になります。

backgroundプロパティの使い方まとめ【css】

 

  • padding-box

ボーダー領域には背景が表示されません。パディング領域からの表示になります。

backgroundプロパティの使い方まとめ【css】

 

  • content-box

パディング領域には表示されません。

backgroundプロパティの使い方まとめ【css】

 

一括で指定できるので覚えておくと便利な記述でした。よかったら参考にしてください。

Share Please

Read this too