背景画像は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で確認してください。
