【CSS】背景画像のサイズ(大きさ)を変えたいならbackground-sizeを使う!

今回は背景画像のサイズを変えたい場合について!

CSSで下の写真を背景画像に設定したい。

コーヒーを飲む女性

しかし、実際に背景画像を設定できるbackground-imageで背景画像を設定してみると

画像が切れてしまっている状態

「大きすぎる!写真が全部入ってないじゃん。」

ってことがよくあると思う。

背景画像のサイズ変更はbackground-sizeを使う

「この画像の大きさを変えたい!」

という時に便利なのがbackground-sizeプロパティだ。

  • background=背景
  • size=大きさ

だから、背景の大きさを変えるプロパティと言える。

本当は、background-image-sizeだともっとわかりやすいのだが、

「背景で大きさを調整するのがimageのみだから省略されているのだろう」

とプログラミング小僧は勝手に解釈している。

background-sizeの使い方

使い方は簡単だ。

と指定するだけだ。

指定する方法は100pxと数値で指定してもいいし、%(パーセント)で指定もOK

と横の長さだけを指定することも出来る。

この場合は、縦の長さに関してはautoとなり、自動で調整される。

先程の写真を画面の真ん中に横幅500pxの大きさで入るようにCSSで記述すると
※コードを簡単にするためにbodyタグに直接CSSを適用

background-sizeの説明

こんな感じで調整ができる。

背景画像はデフォルトだと勝手に繰り返されてしまうから、それを止めたい場合は

を使って繰り返しをストップさせる。

また、背景画像の位置を調整したい場合は

を使って細かく調整をする。

背景画像は

  • 設定の仕方
  • 大きさの調整
  • 繰り返しの調整
  • 位置の調整

とセットで覚えた方が覚えやすく、実際にも使いやすいと思う。

関連記事はこちら!

【CSS】文章の背景に画像を入れたい場合はbackground-imageプロパティを使う!

【CSS】背景画像の位置を変えたい場合はbackground-positionを使う!

【CSS】背景画像の繰り返しを止めるにはbackground-repeatを使う!

おすすめの記事