【初心者向け】背景画像のサイズ指定方法を図をつかって丁寧に解説! – CSS background-size

Web制作

こんにちは。
Web制作者のhikaruです。

今回はCssで背景画像のサイズ指定方法を解説していきます。

background-size: auto

初期値。

background-size: cover

background-sizeにcoverを指定すると、
画像は自動で拡大され要素全体をカバーします。

background-size: coverを指定した状態

background-size: contain

background-sizeにcontainを指定すると、
画像は縦横比を維持しながら要素に収まるように、
自動で縮小します。

background-size: containを指定した状態

x軸、y軸を指定する方法

background-size: 300px 150pxとすることで、
背景画像は明示的にサイズ指定をすることが可能です。
前がx軸、後ろがy軸。

y軸を省略した場合、
y軸は自動でauto指定となります。

background-size、明示的にサイズを指定した状態

まとめ

背景画像の指定方法には色々あるので、
作業に詰まったら確認してみるのもアリだと思います。

以上、Css背景画像のサイズ指定方法まとめでした。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP