カテゴリー

キーワード

 
> 【CSS3】background-size:cov...

【CSS3】background-size:cover;で背景全面を画像にする方法(IE8対応)


2015 年 5 月 22 日 投稿    view: 16604
タグ:
このエントリーをはてなブックマークに追加

css3 background-size:cover;

こんにちは、WEBマーケティング部の杉尾です。


今回はCSS3のbackgroud-sizeで画像を背景全面に表示させる方法を紹介します。


最近、背景が全面画像になっているページがよく見られます。


以前は読み込みに時間がかかるのが難点でしたが、今は処理速度も回線速度も上がっていますので、問題なくデザインできるようになっています。


スマホサイト作成のときによく使われますので、是非覚えて使ってみてください。



background-size:cover;

主要ブラウザ対応状況

まず、いつものようにCaniuse.comを見に行き、各主要ブラウザのbackground-size対応状況を確かめます。


background-sizeの主要ブラウザ対応状況


モダンブラウザではほぼ全てが対応済みです。(OperaMiniはブラウザシェアが低いので無視)
気になるのはIE8とAndroidブラウザの古いバージョンくらいですね。


その二つにも対応できるコードを紹介します。


対応ブラウザごとのソースコード紹介

どういうブラウザに対応したいかによって必要なコードは違ってきます。


「3通り + 解説用」の『4通りのコード』を用意しましたので、必要なものをお使いください。


なお、htmlソースは共通で、こちらを使っています。


HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>background-size</title>
<link rel="stylesheet" type="text/css" href="style_bg.css">
</head>
<body>

</body>
</html>

【コード1】

IE8(とAndroid Browser4.3以下)への対応を考えず、手っ取り早くどう書けばいいか知りたい方は、このコードだけをご覧ください


これはショートハンドですので、どういう指定になっているか知りたい方は【コード4】も併せてご覧ください。


ショートハンドとは、いくつかのCSSプロパティをまとめて指定する短縮プロパティのことです。
marginやpaddingなどでよく用います。


[style_bg.css]


body {
background:#333333 url(images/back_large.jpg) center center / cover no-repeat fixed;
}

画像のパスをご自分の環境に合わせて書いてください。


注意点
background-position の後に 『/』(スラッシュ)を書いて、background-sizeを指定してください。


【コード2】

Android Browser4.3以下にも対応したい方はこちらをどうぞ。
(iOS Safariの古いバージョン対応の場合も、こちらを書いた方がいいです。iOS6.1以下)


[style_bg.css]


body {
background:#333333 url(images/back_large.jpg) center center / cover no-repeat fixed;
}
@media only screen and (max-width: 767px) {
    body {
        background:#333333 url(images/back_small.jpg) center center no-repeat fixed;
        background-size: cover;
    }
}

注意点としては、『background-size』を『background』プロパティの後に書くことです。


これはどうしてかというと、『background』のショートハンドで指定していない値はautoと見なされるからです。
ですので、『background-size』を前に書いていると、coverがautoに上書きされるので、思っているような表示になりません。


※iOS7でも場合によってはこの指定でないと表示されない場合があります。実機でお確かめください。


4行目、Media Queries(メディアクエリ)を使ってウィンドウサイズが767px以下のときは小さくした画像を読み込んでいます。
この画像のサイズは適宜調整してください。


同じ画像を読み込むと大きなファイルサイズのせいで表示が遅れたり、画像の表示箇所が思った通りの場所でなかったりと不具合が起こるからです。


【コード3】

IE6~IE8にも対応するようにjQueryを使います。


下記ソースコードを、head内のスタイルシートを読み込んでいる部分より下に下記を記述してください。
※HTMLソース内です。


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--[if lte IE 8]>
<script src="js/jquery.backgroundcover.min.js"></script>
<script>
$(function(){
    $('body').backgroundcover({
    });
});
</script>
<style>
 body {
    background:#cccccc url(images/back_large.jpg) 50% 50% no-repeat fixed;
    background-size:cover;
  }
</style>
<![endif]-->

『background-size:cover;』をIE8以下にも適用するjQueryプラグインの「jquery.backgroundcover」を使用しています。


ファイルは下記より入手してください。


https://github.com/iwyg/jquery.backgroundcover


『jquery.backgroundcover.min.js』が圧縮版ですから、そちらを使用しています。
各ファイルまでのパスは環境に応じて書き換えてください。


1行目と最後の<!--[if lte IE 8]>~<![endif]-->はIE8以下だったらこれを読み込むという記述です。

背景画像をdivに指定したい場合は、class名をつけて、6行目のbodyを『.sample』のように書いてください。

style部分、background-position(50% 50%と書いている部分)は画像の大きさに合わせて調整してください。


【コード4】

こちらはbackgroundのショートハンド(【コード1】で記述したもの)をバラバラに指定しています。
コメントをつけていますので、ご確認ください。


body {
    /*--- 画像ファイルのパスを指定 ---*/
    background-image: url(images/back_large.jpg);
       
    /*--- 画像を常に上下左右の中央に配置 ---*/
    background-position: center center;
       
    /*--- 画像の繰り返し表示を禁止 ---*/
    background-repeat: no-repeat;
       
    /*--- ウィンドウが画像の高さを超えるとき、動かないように固定 ---*/
    background-attachment: fixed;
       
    /*--- 画像を指定した領域に応じて、背景画像を調整 ---*/
    background-size: cover;
       
    /*--- 背景画像が読み込まれる前に表示される背景色 ---*/
    background-color: #333333;
}

まとめ

background-sizeは少しクセのあるプロパティですが、モダンブラウザに限るとCSSに一文追加するだけですので実装が楽ですね。


IE8もそろそろ完全に切るときが近づいていますが、上記で紹介したやり方で適用可能だと知っておくと便利です。


最後までお読みいただき、ありがとうございました。



もう一記事いかがですか?


【CSS】CSS3で追加されたセレクタ 19選!!


【CSS】CSS3のセレクタとプロパティをIE8に対応させる方法

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事