自由気まままMENUCLOSEサイトメニューWeb制作フリーランスブログネタプロフィールお問い合わせCLOSESEARCHWeb系フリーランスがWeb制作やガジェット、ブログについて綴っていきますWeb制作フリーランスブログネタプロフィールお問い合わせHOMEWeb制作background-imageでレスポンシブに対応した可変背景の作り方background-imageでレスポンシブに対応した可変背景の作り方2019年4月26日Web制作ツイートシェアはてブ送るPocketWebサイトのトップでは、以下のようなキービジュアルが設定されていることがよくあります。こちら、background-imageを用いて、ウィンドウサイズを変更しても縦横比を維持したまま可変する背景画像の作り方を紹介します。以下、記事に入ります。先ほどお見せしたように、完成系は以下のようになります。ヘッダーは以前の記事で紹介した「Flexboxを用いたよくあるヘッダーの作り方(IE11対応)」をそのまま使用しています。こちらの背景が、ウィンドウを大きくしても小さくしても縦横比が変わらないようにします。HTMLは以下のようになります。class="mainvisual"></div>CSSで背景を設定するので、divの中身は不要です。CSSは以下のようになります。56.17%;}以下、コードについて解説。backgroundbackground-imageで背景画像を指定します。background-sizeは必ずcoverを指定してください。coverがないと、背景が画像サイズ以上に大きくなった時リピートしてしまいます。padding-bottom)を使用します。padding-topの値ですが、以下の計算式を使用します。(%)この値を、padding-topに指定します。今回用いる画像の情報を見てみましょう。大きさの部分を見ると、1280×719となっています。56.17%を指定してあげます。実際の画像を見てみましょう。iPhoneSEサイズ(320)で見ても同様です。coverとpadding-topを指定してあげれば、どんな画面サイズでも背景画像が綺麗に表示されます。内部コンテンツの配置こちらの背景指定ですが、ひとつ欠点があります。それは、背景の上にコンテンツが配置出来なくなる点です。画像のようにpadding-top(緑色の部分)が背景部分を占めてしまっているので、paddingに押し出されて画像やテキストを背景上に配置することができません。absolute;を使用します。試しに、以下のロゴ画像を中央に配置してみましょう。HTMLにロゴの情報を書き足します。relativeを指定します。あとは、ロゴにabsoluteを指定して上記のプロパティを指定することで上下左右中央寄せの配置が可能です。codepen背景画像部分は各々の画像に差し替えてご使用ください。上記の画像にあるヘッダー部分は外しております。CodePen.まとめ今回紹介した縦横比を保持したまま綺麗に配置する方法、サイトトップのキービジュアルなどで頻繁に使用する手法なのでぜひ覚えておいてください。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。