ちょっとディープな生物の世界

【CSS】背景画像に関わるプロパティ:background-image、background-size、background-position

背景画像はbackground-imageでつける

背景画像はbackground-imageでつけることができますが、それのみではレイアウトを整えることはできません。background-sizeとbackground-positionが必要です。

background-image:url(    );

要素にどのように画像を埋めるかを指定する:background-size

背景画像は、要素いっぱいに広げることが多いです。縦横比を維持しながら画像を縮小拡大してくれる値にcoverとcontainがあります。

coverは要素が画面いっぱいに埋まるようにします。そのため、画像の一部がはい出すことがあります。

background-size: cover;

containは画像がはみ出すことはなく、要素いっぱいに拡大します。また、同じ画像を何度も繰り返します。繰り返さないためには、background-repeat: no-repeat;で指定する必要があります。

background-size: contain;
background-repeat: no-repeat;

位置を指定する:background-position

意外と忘れがちなのがポジションの指定です。上手く位置してくれない時があります。画像の種類にもよりますが、よく使う値は「bottom」です。bottomは背景画像を真ん中の下に置いてくれます。

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

詳しい位置はMDNで確認してください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です