CSSで背景を指定するときに使うbackgroundプロパティ。
指定方法がいろいろあって何を使えばいいの？
こんな悩みはありませんか？
今回はそんなbackgroundプロパティについて解説します！
背景画像の設定や色の変更、背景の位置やサイズの調整、一括での指定方法などを紹介しています。
背景画像を設定する：background-imageプロパティを使おう！
まず一つ目にbackground-imageです。
背景画像を要素に設定するためには、CSSのbackground-imageプロパティを使用します。
それでは、このプロパティを使って背景画像を設定する手順を見てみましょう！
background-imageの指定方法
background-imageの指定方法は以下のように書きます。
background-image: url(" ・・/・・/");
カッコの中には画像のURLを書きます。
画像のURLは、ローカルのファイルパスやインターネット上のURLなど、アクセス可能な場所から指定します。
下記はhttps〜で始まる絶対パスを使っています。
相対パス（../img/○○.jpgなど）で指定する方法もあります。
See the Pen bg-img by kanae (@suzukana) on CodePen.
background-imageを使うときにはbackground-image以外にもwidthとheightと、このあと出てきますがbackground-sizeを合わせて指定する必要があります。
背景色を設定する：background-colorプロパティを使おう！
二つ目はbackground-colorの解説です。
背景色を要素に設定するためには、CSSのbackground-colorプロパティを使用します。
次はこのプロパティを使って背景色を設定する手順を見てみましょう！
background-colorの指定方法
background-colorで背景色を指定するやり方は複数あります。
1. キーワードを使った基本的な色の指定方法
定義されたキーワードを使って基本的な色を指定することができます。
下記はbackground-color: red;このように指定しています。
See the Pen bg-color by kanae (@suzukana) on CodePen.
要素の背景色を赤に設定しています。他にも、green、blue、yellowなどのキーワードがあります。
2. カラーコードを使った色の指定
より具体的な色を指定する場合は、カラーコードを使用します。
カラーコードは、RGBやHEX値といった形式で表現されます。
先ほどのbackground-color: red;をカラーコードを使うと
background-color: rgb(255, 0, 0);やbackground-color: #ff0000;になります。
3. 透明度の設定
背景色に透明度を加えることも可能です。
background-colorプロパティにrgba関数を使用することで、透明度を含んだ色を指定することができます。
background-color: rgba(255, 0, 0, 0.5);
透明度のある赤の指定になります。
背景を繰り返し表示する：background-repeatプロパティの使おう！
背景画像を要素にするときに、画像が要素の大きさに合わない場合や、画像を繰り返し表示したい場合があります。
そんな時はbackground-repeatプロパティを使うことによって、背景画像の繰り返しの表示や配置をカスタマイズすることができます。
それではbackground-repeatプロパティの具体的な使い方を見てみましょう！
1. デフォルトでの表示
デフォルトでは画像は繰り返し表示されます。
画像は縦方向と横方向に繰り返されます。
See the Pen bg-repeat by kanae (@suzukana) on CodePen.
2. 繰り返し表示を変更する
繰り返し表示の動きをを制御するために、background-repeatプロパティの値を変更することができます。
See the Pen bg-repeat2 by kanae (@suzukana) on CodePen.
上記の例では、no-repeat（繰り返し表示しない）を指定しています。
他にも、repeat-xの値を指定することで、画像が水平方向にのみ繰り返し表示されます。
また、repeat-yを使うと、垂直方向にのみ繰り返し表示されます。
背景画像のサイズを調整する：background-sizeプロパティを使おう！
背景画像のサイズが要素のサイズと一致しない場合や、画像を拡大・縮小して表示したい場合があります。
そんな時はCSSのbackground-sizeプロパティを使用することで、背景画像のサイズをカスタマイズすることができます。
それでは、background-sizeプロパティの具体的な使い方を見てみましょう！
1. サイズの指定をする
background-sizeプロパティを使用して、背景画像のサイズを指定します。
値としては、ピクセル数、パーセンテージ、キーワード（cover、contain）などが使用できます。
See the Pen bg-size by kanae (@suzukana) on CodePen.
上記の例ではbackground-size: 400px 200px;とピクセルで固定値で指定しています。
しかし、この指定方法だと画像のアスペクト比のバランスが少しおかしく、潰れて見えていますね。
それでは次はアスペクト比を保って表示させる方法を解説します。
キーワードを利用する
background-sizeプロパティでは、キーワードを使用して背景画像のサイズを調整することもできます。
キーワードによる指定方法の種類
- cover: 背景画像を要素に完全に合うように拡大・縮小しますが、アスペクト比は維持されません。
- contain: 背景画像を要素の幅または高さに合わせて縮小し、要素内に収めますが、アスペクト比は維持されます。
- auto:背景画像の元のサイズを保持して表示します。
- initial:ブラウザの初期値に戻します
- inherit:親要素から継承されたbackground-sizeの値を使用します。
先ほど固定値で指定したものをアスペクト比を維持したまま表示するにはbackground-size: containを指定してあげましょう！
See the Pen bg-size2 by kanae (@suzukana) on CodePen.
ちなみにbackground-size: containとよく迷うものがbackground-size: coverですが、
こちらで指定すると下記のようになります。
widthとheightをピクセルで指定しているので、そこからはみ出すところはトリミングされます。
See the Pen Untitled by kanae (@suzukana) on CodePen.
背景の位置を指定する：background-positionプロパティを使おう！
背景画像を配置する場所を指定するためには、CSSのbackground-positionプロパティが便利です。
このプロパティを使うことで、背景画像を要素の特定の位置に正確に配置することができます。
それではbackground-positionの使い方を見てみましょう！
基本的な指定方法
background-positionプロパティは、背景画像の水平方向と垂直方向の位置を指定します。
background-position: x座標 y座標;
このように使います。
background-positionは単独で使うものではなく、background-imageなどに対して使います。
指定できる値は様々ありますので紹介します。
1. ピクセル値を使った位置指定
background-position: 100px 100px;
この例では、背景画像を要素の左上から水平方向に100ピクセル、垂直方向に100ピクセルの位置に配置します。
2.パーセンテージ値を使った位置指定
background-position: 50% 25%;
この例では、背景画像を要素の水平方向の中央（50%）と垂直方向の上から25%の位置に配置します。
3.キーワードを使った位置指定
background-position: right top;
この例では、背景画像を要素の右上に配置します。
水平方向には「left、center、right」が指定できます。
垂直方向には「top、center、bottom」が指定できます。
背景を一括指定する：backgroundプロパティをまとめて使おう！
背景に画像だけでなく、色やパターン、位置なども同時に設定したい場合、backgroundプロパティをまとめて指定できます。
それでは具体的にどうまとめるのか、使い方を見てみましょう！
背景色と背景画像、繰り返し、位置、サイズの一括指定方法
backgroundプロパティを一つ一つ指定し、スペースを使ってまとめることができます。
それぞれの値の指定方法は上記で説明してあるのでそれを参考にしてください。
注意！
sizeの値は、positionの値の後に「/」スラッシュで区切ります。
まとめ
いかがでしたか？
今回はbackbroundプロパティについて解説しました。
一括で指定することもできるので、とてもスッキリしますね！
大変よく使うプロパティなので、しっかり理解して使えるようにしましょう。
