【CSS】backgroundで背景画像を入れるときの配置を比較

求職者支援訓練でwebデザインを学ぶデザイン初心者が、背景画像を『background』で入れるとき、background-sizeの指定でどうのように違うのかを忘備録としてまとめました。
実装して見比べてみると難しいものではないので、このブログで理解できるはず！

WEBデザインでよく使う『background』を感覚的に使っている方やしっかり違いを見比べたい、デザイン初心者さん必見です。

Contents

はじめに

backgroundプロパティで指定できる値はこちら

※background-sizeはbackground-positionの指定の後に、’/’で区切って指定しなければならないため注意が必要。

backgroundは下記のようにショートハンド・複数指定もできます。

セレクタ {
	background: colorの値 imageの値 repeatの値.....;
}

※それぞれの値を入力する際には半角スペースで区切って指定すること

background-imageで600×400pxの画像を使って解説します。

背景画像の指定と実際のサイズを記載します。

.セレクタ{
  width:600px;
  height:400px;
  background-image:url("../img/bg-img.png");
}

widthとheightを400×400の正方形に指定すると、画像のサイズはそのままで途中から表示されなくなりますね。

.セレクタ{
  width:400px;
  height:400px;
  background-size: auto;
  background-image:url("../img/bg-img.png");
}

autoとほぼ変わらず、画像のサイズはそのままで途中から表示されなくなりますね。

.セレクタ{
  width:400px;
  height:400px;
  background-size: cover;
  background-image:url("../img/bg-img.png");
}

横幅のサイズに合わせて全体が見えるようになりました。

.セレクタ{
  width:400px;
  height:400px;
  background-size: contain;
  background-image:url("../img/bg-img.png")
}

縦幅と横幅がそれぞれ100％になるように調整されます。

縦横比が異なる画像をこのように指定してしまうと、明らかに伸びてしまったような見た目になるので、あまり実用的ではなさそう。。。

今回は、ゼリーの写真を利用しましたが、画像が伸びた感じになっても問題ない背景を使う時には使う機会があるかもしれません。

.セレクタ{
  width:400px;
  height:400px;
  background-size: 100% 100%;
  background-image:url("../img/bg-img.png")
}

セレクタに指定しているwidthやheightではなく、background-sizeで指定している比率に変わりました。

.セレクタ{
  width:400px;
  height:400px;
  background-size: 300px 200px;
  background-image:url("../img/bg-img.png")
}

求職者支援訓練でwebデザインを学ぶデザイン初心者が、背景画像を『background』で入れるとき、background-sizeの指定でどうのように違うのかを忘備録としてまとめました。
実装して見比べてみると難しいものではないので、このブログで理解できましたよね？

CSSは色々弄りながらなんとなくしても形になってしまうことがあるので、しっかり違いを理解したい！という方の参考になったら嬉しいです♪