CSSで背景画像をウィンドウサイズに合わせて表示したい
2020/11/29 更新
Webサイト作成時に背景画像を画面全体に表示する際、ウィンドウをリサイズしても全体に表示させる方法のメモ。
CSS3を使って画像をウィンドウサイズに合わせる
ただ単に背景画像を指定するだけではうまく表示できないため(←当たり前ですが)、いろいろと検索した結果、次のようにすれば背景画像をウィンドウに合わせて全画面で表示できました。
html {
min-height: 100%;
background-image: /* --ここに背景画像を指定-- */;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
background-sizeは背景画像のアスペクト比を維持してくれますが、それだけではFirefoxで試すと縦方向に余白ができてしまいました。
どうやらmin-heightが重要らしく、この指定があることで余白がなくなり、ウィンドウをリサイズしても追従してくれるようになりました。