画面の幅いっぱいに画像を表示する画像を背景として、画面の幅いっぱいに表示する方法について解説します。高さのいずれかを基準に画像を自動伸縮させる設定方法についても紹介します。表示幅にあわせて画像の表示幅も変える画像の幅を自動的に拡大する表示幅にあわせて画像の表示幅も変えるレスポンシブ対応などでブラウザの表示幅にバリエーションがあり、あわせて背景画像も表示するサイズを調整することが増えました。今回は表示幅にフォーカスして、様々な幅に対応する方法を解説します。no-repeat;}シンプルにbackground-positionプロパティで中央表示をした場合の表示方法です。大きい画像を1枚用意し、中央(上揃え)表示しています。設定自体は非常に簡単ですが、ブラウザの表示幅が画像の横幅より大きい場合には左右に余白ができてしまうというデメリットがあります。top」はbackground-positionプロパティでも同様に指定することができます。画像の幅を自動的に拡大する続いて、背景画像のサイズを指定し、画像よりも表示幅が広い場合にも対応できるように設定します。no-repeat;}background-sizeプロパティの「cover」は、要素の全体を覆うように画像を表示する指定です。top」と区別するために必要です)上記のように要素の横幅が画像の横幅より広い場合でも、画像は自動的に拡大されて表示されます。「cover」は高さに対しても有効で、画像の表示サイズは横幅のみでなく高さについても自動的に拡大表示されます。画像の比率を保ったまま、背景画像を縦に伸ばすか、横に伸ばすかを自動的に判別して調整されるところがポイントです。今回のように背景画像を表示する要素にmin-heightプロパティを指定すると、背景画像の最低限の高さを指定することができます。100%」といった指定もありますが、こちらは画像の最低限の高さを指定することができなかったり、「横幅」と「高さ」のどちらを基準にするかが自動的に判定できません。そのため、背景画像として用意する画像のサイズを選ぶのが難しく、あまりオススメできません。100%」も画像の比率が無視されてしまうため実用的ではありません。auto」とすると、次のように表示幅が異なる場合に要素の高さにギャップが大きくなり、画面いっぱいに画像を表示することが難しくなります。auto」の指定は、このように表示幅に完全に連動して画像の幅が伸縮されるため、表示幅が狭い時と広いときのギャップが大きくなります。表示幅が狭いときに、背景画像の赤さが足りず、要素の下部に空白が発生しやすいため、表示の制御が難しい方法です。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。