[CSS] backgroundで背景のプロパティをまとめて指定しよう!

1.backgroundとは?

backgroundプロパティは背景色、画像、繰り返し、位置などを一括で指定できるショートハンドです。

値の指定方法は以下の通りです。

{ background: 値; }

値の指定方法

それぞれの値は半角スペースで区切って指定します。

指定の順序は問われておらず、必要のない指定は省略可能です。

2.backgroundの使い方

それではbackgroundの使い方をみていきましょう。

.background { 
 background: no-repeat center/80% url("image.png");
}

上記のようにすることで単一の画像を中央寄せかつ縮小させて表示させます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!