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

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

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

Contents

Browser Support

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

CSS 3

background-size: cover を利用する。

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

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

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

sample.scss
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; を指定しているセレクタに追記します。

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

補遺

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

2019/03/05

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

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

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

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