CSS background-sizeの調整について

Question

つたない質問で申し訳ないのですが、質問に答えていただけると幸いです。

あるwebサイトを模写コーディングしていて、背景画像の位置や大きさなどをcssで指定しようとしています。その時に、背景画像をbackground-size: cover;で画像の縦横比をそのままに画像全体を表示させようとしましたが、画像の一部分しか表示されません。

特に画像の縦の長さが極端に小さいので、wrapperのheightを大きくすればよいと考えましたが、依然画像の一部分しか表示されず、画像の縦横比が本来よりもかなり拡大された状態になってしまいます。

モデルのwebサイトはこちらです→　https://flowr.is/

自分のコードはこちらです????

.top-wrapper {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_header_pink_sp-de1ec860149bbba5f40f558d1e2c8ed1e1c570445e1f6016dc0728d2bf56121a.jpg);
  background-size: cover; 
  background-position: center ; 
  background-repeat: no-repeat;
}

お時間あればご教授よろしくお願いいたします。

Answer 1

background-size: cover;で画像の縦横比をそのままに画像全体を表示させようとしましたが、画像の一部分しか表示されません。

はい、background-size: cover;は画像を拡大して、領域サイズ以上のサイズにします。領域と画像の縦横比が合わない場合、領域からはみ出します。

画像全部を表示することを優先したい場合、background-size: contain;が適切です。

Comments

[Kindy]

ご回答ありがとうございます。

なるほど、領域以上のサイズにするのですね。自分自身の理解不足でした。
教えていただきありがとうございます！

Answer 2

https://flowr.is/ のサイトでは、メディアクエリで PCとスマホで背景画像を変えてますが、それについては把握してますか。

提示のコードは、スマホ用の縦長の画像(750 X 1334 px)になってます。
PCで模写先サイトと同じにならないということなら、PC用のサイズの画像(2880 X 1789 px)に変更してください。

模写先と同じようにレイアウトにしたいのなら background-size: cover; になります。
余白なしに画像を最大限表示するということになります。（一部欠けます。）

background-size: contain;だと画像はすべて表示されます。そのかわり上下か左右に余白ができます。

Comments

[Kindy]

ご回答ありがとうございます。

なるほど、スマホ用とPC用に別の画像が使われていたんですね、、ご提示ありがとうございます。
画像を変えてbackground-size: cover; にしたところ、修正することができました！その他の情報含めて分かりやすい説明ありがとうございます