フリーランスが会社員収入を継続して得られないパターン7つ

背景画像がレスポンシブで画面内に表示されない

背景画像がレスポンシブで画面内に表示されない場合の対処法をお伝えします。

問題

レスポンシブで背景画像を縮めた時、背景画像がほとんど見えなくなってしまう。

解決策

手間がかからない順にお伝えします。

1.background-size:contain;やbackground-size:100% 100%;を試す

2.画像をスマホ用のものに変える(サイズや見え方が違うものを使う)

左はPCやタブレット用、右はスマホ用の画像です。

スマホ用でも写真のコンテンツを全て見せたい場合は以下のように縮尺や大きさの異なる画像を使いましょう。