背景画像のサイズ指定方法

背景画像が綺麗に表示されない問題

以下のように単純にCSSファイルでbackbround-imageだけ指定したら

.container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
min-height: 700px;
background-image:
url("https://i0.wp.com/rich-rice.com/wp-content/uploads/2018/04/ciecle2P-kawaii-pink.jpg?w=640&ssl=1");
}

このように小さい画像が表示され、足りない部分が繰り返される形で表示されてしまった。

解決方法

そこで.containerに background-size: cover; プロパティを指定してあげたら解決。

.container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
min-height: 700px;
background-image:
url("https://i0.wp.com/rich-rice.com/wp-content/uploads/2018/04/ciecle2P-kawaii-pink.jpg?w=640&ssl=1");
background-size: cover;
}

以下のようになった！(わかりづらいかもですが、右端の部分がきちんと途切れず表示されてます)