Recent posts:

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

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

2015/11/30 06:30

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

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

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

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

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

Pocket

コメント

Twitter

【更新しました】
さくらのレンタルサーバーで$_SERVER[‘SERVER_ADDR’]の値が変わった - PC雑記帳
https://zakkiweb.net/a/71/

2018/04/07 09:52

【更新しました】
PC雑記帳は10周年になりました - PC雑記帳
https://zakkiweb.net/a/70/

2018/03/25 19:00

【更新しました】
.netドメインが値上がりした - PC雑記帳
https://zakkiweb.net/a/69/

2018/02/26 20:35