[HTML & CSS General] CSS: 自動拡縮で background image を Window の width, height にフィットさせる

公開日: 2014/06/25
更新日: 2019/03/05

いわゆる背景画像をブラウザいっぱいに表示させるレスポンシブ対応。

[markdown]
## Browser Support

Firefox, Chrome, Safari, iOS, Android, IE9+
他もあわせて導入すると IE7+ あたりになりそう。

## CSS 3

`background-size: cover` を利用する。

> * [Perfect Full Page Background Image | CSS-Tricks](http://css-tricks.com/perfect-full-page-background-image/)

“`css:sample.css
body {
background-image: url(sample.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
“`

ベンダープレフィックスも必要なよう。

> * [Background Size | Compass Documentation](http://compass-style.org/examples/compass/css3/background-size/)

`backgroud` をまとめて書いて、Comapss mixin もつかうと、こんな形となる。

“`css:sample.scss
body {
background: url(sample.jpg) no-repeat center center fixed;
@include background-size(cover);
}
“`

但し、IE 7,8 で余白ができてしまう。

## CSS

CSS だけで実現する方法があるらしいが未検証。

> * [Full Screen Background Image – Pure CSS Code](http://paulmason.name/item/full-screen-background-image-pure-css-code)
> * [CSSだけで背景を画面全体にする方法 | Ri-mode Rainbow | No:1053](http://ri-mode.com/rainbow/2013/04/21/css_fullscreen_background/)

## jQuery

下記を後で試してみる。

> * [Perfect Full Page Background Image | CSS-Tricks](http://css-tricks.com/perfect-full-page-background-image/)

他にプラグインが多数見つかるが、こちらで紹介されている [louisremi/jquery.backgroundSize.js](https://github.com/louisremi/jquery.backgroundSize.js) が良さそう。

> * [[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック | コリス](http://coliss.com/articles/build-websites/operation/css/css-responsive-full-background-image-by-sixrevisions.html)
> * [[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」](http://www.webantena.net/javascriptjquery/plugin-jquery-backgroundsize/)

## HTML Components (HTC)

がしかし、[louisremi/jquery.backgroundSize.js](https://github.com/louisremi/jquery.backgroundSize.js) をみると [louisremi/background-size-polyfill](https://github.com/louisremi/background-size-polyfill) を使うようすすめられる。

> * [louisremi/background-size-polyfill](https://github.com/louisremi/background-size-polyfill)

説明にはありませんが、Demo を確認する限り IE 7 でもうまく表示されています。
CSS 3 で設定していた `background-size: cover;` および `background-size: contain;` を IE 6, 7, 8 でも使えるように対応してくれるようです。

※ ローカルの vagrant 環境で以下のままでは動かなく、本番環境でそもそも権限がなかったので取りやめました。
動作確認できていませんが、設定のメモとして残します。

### インストール

Bower で取得します。

“`prettyprinted
% 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` をサーバのドキュメントルートにコピーしてみます。

“`prettyprinted
% cp bower_components/background-size-polyfill/backgroundsize.min.htc dist/
“`

### Apache の設定

.htc を扱えるようサーバ設定が必要。
.htaccess であれば、下記を書き加える。

“`.htaccess
AddType text/x-component .htc
“`

### CSS の設定

`background-size: cover;` を指定しているセレクタに追記します。

> * [louisremi/background-size-polyfill](https://github.com/louisremi/background-size-polyfill#how-to-use-it)

“`css:sample.scss
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 の例ですが、パスの指定についてはこちらが参考になりそう。

> * [CSS3をIEにも対応させてみる | Lengthy-Life](http://lengthy-type.com/wp/webcreate/2012/02/21/css3pie/)
> * [WordPress › フォーラム » IEをPIE.htcかie-css3.htcでcss3に対応させる方法](http://ja.forums.wordpress.org/topic/9547)

## 補遺

2014/07/03
情報を追加してリライトしました。

> * [html – CSS background image to fit width, height should auto-scale in proportion – Stack Overflow](http://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion)
> * [background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン | Dress Cording](http://dresscording.com/blog/responsive/background-size.html)
> * [背景画像の拡大・縮小 → background-size ! | 0から目指すWebマスター](http://www.allinthemind.biz/markup/css/background-size.html)
> * [greenish/jquery-cover](https://github.com/greenish/jquery-cover)

2019/03/05

現在は IE11 未満のサポートが必要ないので、デスクトップ向けであれば以下で対応できます。

“`css:sample.scss
body {
background: url(sample.jpg) no-repeat center center fixed;
background-size: cover;
}
“`

但し、`background-attachment: fixed` はモバイル向けブラウザで未だサポートされていません。

> * [Can I use… Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=background-attachment)

そのため CSS Fallback 等、何らかの手当が必要になります。

> * [html – CSS background-size: cover replacement for Mobile Safari – Stack Overflow](https://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari)
> * [Perfect Full Page Background Image | CSS-Tricks](https://css-tricks.com/perfect-full-page-background-image/)

[/markdown]