【CSSで背景画像を指定する方法】background-imageを使いこなす！
本記事ではCSSで背景に画像を指定する方法を解説します。
サイト制作にも必ず出てくる欠かせない方法なので、きっと役に立つと思います！
background-imageで出来ること
CSSのbackground-imageを使うと、背景を画像に指定することができます。
これは多くのWebサイトでもよく使われている方法です。実際、ただのカラー背景より画像を使った背景の方が、華やかなサイトの印象を受けますね。
background-imageの使い方
基本の書き方
背景を画像にするためのCSSの書き方はこちらです。
{ background-image: url("画像へのパス"); }画像ファイルへのパスは相対パス、絶対パスのどちらでも大丈夫です。
相対パス、絶対パスって何?と思われたかもしれませんが、絶対パスは(https://〜)から始まるもの(例えばフリー素材の画像など)、相対パスは同じディレクトリ内など手元のファイルの中にあるものです。
下のコードは、「background-image」で背景に画像を指定した例です。
See the Pen background-image-example by Yuhomyan (@yuhomyan) on CodePen.
画像のサイズを指定する
{ background-size: 幅 高さ; }background-sizeプロパティは、画像のサイズを指定することができます。プロパティの値は、pxや%など具体的な数値、または以下の値をとります。
| 値 | 内容 |
| contain | 縦横比を変えずに、背景領域に元画像が全て収まる最大サイズ |
| cover | 縦横比を変えずに、背景領域を完全に覆う最小サイズ |
| auto | 画像本来の大きさ |
| px | 絶対的なサイズをpxで指定 |
| % | 背景領域の幅や高さに対する割合 |
特によく使われるのはcontainとcoverです。
それぞれの違いは見た方が分かりやすいと思うので、以下に示しますね。
Cover
See the Pen cover-example by Yuhomyan (@yuhomyan) on CodePen.
Contain
See the Pen contain-example by Yuhomyan (@yuhomyan) on CodePen.
coverでは背景領域全体を覆う大きな1枚の画像、containではまるまる収まった複数枚の繰り返しとなっています。
背景画像の表示位置を設定する
{ background-position: 横 縦; }背景画像をバランスよく綺麗に見せるためのプロパティです。
background-positionプロパティを使うと、背景画像の表示位置を指定出来るようになります。これで画面の幅が変わっても、位置をブレずに表示させられるようになります。
| 方向 | 値 | 内容 |
| 横 | px | paddingボックスの左辺からの距離 |
| 横 | % | 画像がpaddingボックスの左辺から全体幅の何%離れているか |
| 横 | left | 画像を左揃えする（0%と一緒） |
| 横 | center | 画像を中央揃えする（50％と一緒） |
| 横 | right | 画像を右揃えする（100％と一緒） |
| 縦 | px | paddingボックスの上辺からの距離 |
| 縦 | % | 画像がpaddingボックスの上辺から全体幅の何%離れているか |
| 縦 | top | 画像を上揃えする（0%と一緒） |
| 縦 | center | 画像を中央揃えする（50％と一緒） |
| 縦 | bottom | 画像を下揃えする（100％と一緒） |
下の例では、「background-position: center top;」と指定し、中央揃え＆画像の天井が背景の天井に揃う(収まらなければ下側が切れる)ようにしています。
See the Pen bg-position-example by Yuhomyan (@yuhomyan) on CodePen.
背景画像を繰り返す
{ background-repeat: 値; }画像によっては、繰り返して模様として使いたいものもあるかもしれません。
そんなときは、background-repeatプロパティを使うことで、繰り返しのタイプを指定できます。
| 値 | 内容 |
| repeat | 縦、横の両方向に繰り返す |
| repeat-x | 横方向に繰り返す |
| repeat-y | 縦方向に繰り返す |
| no-repeat | 繰り返さない |
| space | ボックスに整数個が収まるように、余白を調整して縦横に繰り返す |
| round | ボックスに整数個が収まるように、画像サイズを調整して縦横に繰り返す |
「background-repeat: space;」を指定すると、こんな感じになります。
See the Pen background-repeat-example by Yuhomyan (@yuhomyan) on CodePen.
背景画像の重なりを指定する
{ background-image: url("上に表示したい画像のパス"), url("下に表示したい画像のパス"); }あまり使うことはないかもしれませんが、background-imageプロパティを指定する際、カンマ（ , ）で区切ると、複数の画像を重ねて表示することができます。
これはオリジナルの模様を作りたい時に便利です。
以下の例では、鹿の画像と竹藪の画像を重ねて表示しています（鹿の背景は透明になっています）。
See the Pen background-layer-example by Yuhomyan (@yuhomyan) on CodePen.
最後に
以上！
CSSで背景画像を指定するプロパティ「background-image」とその使い方についてでした！
Webサイト制作やブログカスタマイズに役立つこと間違いなしなので、ぜひ明日から役立ててください！