カテゴリー

キーワード

 
> 【CSS3】background-sizeプロ...

【CSS3】background-sizeプロパティを紹介します


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

css background-sizeプロパティ

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


前回、background-size:cover;で背景全面を画像にする方法を紹介しました。


それと順番が逆になりましたが、今回はCSS3のbackground-sizeの使い方を紹介したいと思います。



background-size

background-sizeとは

background-sizeは背景画像のサイズを指定するCSSプロパティです。


background-imageまたはbackgroundプロパティと一緒に指定してください。


background-size対応のブラウザ

前回の繰り返しになりますが、caniuse.comを見に行き、各主要ブラウザのbackground-size対応状況を確かめます。


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


ご覧の通りIE8以下には対応していません。
また、Androidの古いバージョンはbackgroundプロパティのショートハンドで書くと思い通りの表示になりません。


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


Androidの古いバージョンへの対応は前回紹介していますので、こちらも併せてご覧ください。


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


background-sizeの値

background-size:cover;

これを指定した要素の全面に背景画像が、縦横比を保持した状態で常に表示されます。


指定領域に対して、それと同じか大きく表示されます。


.foo {
    background-image: url("picture.png");
    background-size:cover;
}

background-size:contain;

背景画像が縦横比を保持した状態で、指定した要素に収まるように表示されます。


.foo {
    background-image: url("picture.png");
    background-size:contain;
}

background-size:値指定;

ピクセル指定、%指定で画像の大きさを指定します。


  .foo {
    background-image: url("picture.png");
    background-size:100px 100px;
}

ここで気をつけたいのは、『background-size:横 縦』の順番だということです。


また、横、縦の部分には『auto』も指定できます。
その場合、背景画像の縦横比を保持し、指定した方の長さに合わせて自動設定されます。


backgroundのショートハンドで指定

上にも書きましたが、ショートハンドとはいくつかのCSSプロパティをまとめて指定する短縮プロパティのことです。


たとえば、

.foo {
    margin-top:5px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:20px;
}

というのを、


.foo {
    margin:5px 10px 15px 20px;
}

のように書くことを言います。


background-sizeも、backgroundのショートハンドとして指定することができます。


たとえば、こう書きます。


.foo {
    background:#333333 url(images/picture.png) center center / cover no-repeat fixed;
}

これは、バラバラに書くと


.foo {
    /*--- 背景画像が読み込まれる前に表示される背景色 ---*/
    background-color: #333333;

    /*--- 画像ファイルのパスを指定 ---*/
    background-image: url(images/picture.png);
            
    /*--- 画像を常に上下左右の中央に配置 ---*/
    background-position: center center;

    /*--- 画像を指定した領域に応じて、背景画像を調整 ---*/
    background-size: cover;
            
    /*--- 画像の繰り返し表示を禁止 ---*/
    background-repeat: no-repeat;
            
    /*--- ウィンドウが画像の高さを超えるとき、動かないように固定 ---*/
    background-attachment: fixed;
}

のようになります。


backgroundプロパティで、background-sizeを指定するには前に『/』を書く必要があります。
これがないと正しい表示になりませんので、お気をつけください。


※画像のパスはご自分の環境に合わせて書き換えてください。


background-size:cover; background-size:contain;をIE8に対応させる

以前は、『jquery.backgroundSize.js』というプラグインが使えましたが、今現在はスクリプトに問題があることがわかっており、同じ作者が『background-size polyfill』というものをリリースしています。


こちらからファイルをダウンロードしてください。
https://github.com/louisremi/background-size-polyfill


ダウンロードしてきたフォルダの中から、『backgroundsize.min.htc』を任意のフォルダに設置します。


HTMLファイルのhead内に以下のソースを書いてください。
IE8以下のときだけ読み込みます。


<!--[if lte IE 8]>
<style>
.foo {
    min-height:100%;
    background: url(images/back_large.jpg) center no-repeat;
    -ms-behavior: url(サイトルート相対パス/backgroundsize.min.htc);
    behavior: url(サイトルート相対パス/backgroundsize.min.htc);
    background-size: cover;/*--- ←ここはcontainでもいけます ---*/
}
</style>
<![endif]-->

.fooの部分は適用したい要素のclass名やid名などを指定してください。


なお、bodyに背景画像を指定するときは、htmlとbodyの高さ、marginやpaddingに気をつけてください。


『サイトルート相対パス』と書かれている部分は少し説明が必要かもしれません。


『サイトルート相対パス』はファイルの指定をスラッシュ『/』から始める方法です。
スラッシュがサイトのルート階層を表しますので、ドメイン直下からのパスを書いてください。


『サイトルート相対パス』について詳しくはここに書いています。
HTMLの相対パス、絶対パスを紹介します【HTML5実践編】


注意点

サーバーによっては.htcファイルが動きません。
そのときは.htaccessファイルにMIMEタイプを追加してください。


下記のように書けば動くようになります。

AddType text/x-component .htc

まとめ

最近はスマホサイトで、前回紹介したbackground-size:cover;を使うことが多いような気がします。


またPCサイトでもレスポンシブサイトに使うと、とても便利ですね。


IE8を切り捨てることができるなら積極的に使っていきたいですね。


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



前回はコチラでご覧いただけます。

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

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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