[HTML & CSS General] CSS: 自動拡縮で background image を Window の width, height にフィットさせる
いわゆる背景画像をブラウザいっぱいに表示させるレスポンシブ対応。
Contents
Browser Support
Firefox, Chrome, Safari, iOS, Android, IE9+
他もあわせて導入すると IE7+ あたりになりそう。
CSS 3
background-size: cover
を利用する。
body {
background-image: url(sample.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
ベンダープレフィックスも必要なよう。
backgroud
をまとめて書いて、Comapss mixin もつかうと、こんな形となる。
body {
background: url(sample.jpg) no-repeat center center fixed;
@include background-size(cover);
}
但し、IE 7,8 で余白ができてしまう。
CSS
CSS だけで実現する方法があるらしいが未検証。
jQuery
下記を後で試してみる。
他にプラグインが多数見つかるが、こちらで紹介されている louisremi/jquery.backgroundSize.js が良さそう。
HTML Components (HTC)
がしかし、louisremi/jquery.backgroundSize.js をみると louisremi/background-size-polyfill を使うようすすめられる。
説明にはありませんが、Demo を確認する限り IE 7 でもうまく表示されています。
CSS 3 で設定していた background-size: cover;
および background-size: contain;
を IE 6, 7, 8 でも使えるように対応してくれるようです。
※ ローカルの vagrant 環境で以下のままでは動かなく、本番環境でそもそも権限がなかったので取りやめました。
動作確認できていませんが、設定のメモとして残します。
インストール
Bower で取得します。
% bower install --save background-size-polyfill
bower not-cached git://github.com/louisremi/background-size-polyfill.git#*
bower resolve git://github.com/louisremi/background-size-polyfill.git#*
bower download https://github.com/louisremi/background-size-polyfill/archive/0.2.0.ta
r.gz
bower extract background-size-polyfill#* archive.tar.gz
bower invalid-meta background-size-polyfill is missing "main" entry in bower.json
bower invalid-meta background-size-polyfill is missing "ignore" entry in bower.json
bower resolved git://github.com/louisremi/background-size-polyfill.git#0.2.0
bower install background-size-polyfill#0.2.0
background-size-polyfill#0.2.0 bower_components/background-size-polyfill
とりあえず backgroundsize.min.htc
をサーバのドキュメントルートにコピーしてみます。
% cp bower_components/background-size-polyfill/backgroundsize.min.htc dist/
Apache の設定
.htc を扱えるようサーバ設定が必要。
.htaccess であれば、下記を書き加える。
AddType text/x-component .htc
CSS の設定
background-size: cover;
を指定しているセレクタに追記します。
body {
background: url(sample.jpg) no-repeat center center fixed;
// background-size: cover;
@include background-size(cover);
-ms-behavior: url(/backgroundsize.min.htc);
}
PIE.htc の例ですが、パスの指定についてはこちらが参考になりそう。
補遺
2014/07/03
情報を追加してリライトしました。
2019/03/05
現在は IE11 未満のサポートが必要ないので、デスクトップ向けであれば以下で対応できます。
body {
background: url(sample.jpg) no-repeat center center fixed;
background-size: cover;
}
但し、background-attachment: fixed
はモバイル向けブラウザで未だサポートされていません。
そのため CSS Fallback 等、何らかの手当が必要になります。