Recent posts:

PCやWebに関する便利な情報や使いこなし情報を紹介

CSSで背景画像をウィンドウサイズに合わせて表示したい

2015/11/30 06:30

Webサイト作成時に背景画像を画面全体に表示する際、ウィンドウをリサイズしても全体に表示させる方法のメモ。

CSS3を使って画像をウィンドウサイズに合わせる

ただ単に背景画像を指定するだけではうまく表示できないため(←当たり前ですが)、いろいろと検索した結果、次のようにすれば背景画像をウィンドウに合わせて全画面で表示できました。

background-sizeは背景画像のアスペクト比を維持してくれますが、それだけではFirefoxで試すと縦方向に余白ができてしまいました。

どうやらmin-heightが重要らしく、この指定があることで余白がなくなり、ウィンドウをリサイズしても追従してくれるようになりました。

Pocket

コメント

Twitter

【更新しました】
あけましておめでとうございます (2018) - PC雑記帳
https://zakkiweb.net/a/67/

2018/01/01 00:01

【更新しました】
今年買って便利だったもの(2017年を振り返って) - PC雑記帳
https://zakkiweb.net/a/66/

2017/12/30 17:47

【更新しました】
Windows 10でタスクバーに表示されるPeopleボタンを非表示にする - PC雑記帳
https://zakkiweb.net/a/65/

2017/11/27 21:46