にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

背景画像を描画領域の面積ぴったりに自動で合わせる方法 [CSS3,イメージ]

CSS3では、背景画像を「描画領域の面積」に合わせて自動で拡大・縮小させる機能としてbackground-sizeプロパティが加わりました。背景画像を描画領域の空間に合わせて自動でサイズ調整させ、ボックスの大きさにぴったり合わせることも簡単になりました。1枚の画像で描画領域全体を覆い尽くすように拡大・縮小させたり、画像が途中で切られないように表示サイズを自動調整させたり、描画領域内に指定枚数だけ表示されるよう自動で拡大・縮小したり……などの表示が実現できます。

背景画像を描画領域の面積ぴったりに自動で合わせる方法

CSS3では、背景画像を「描画領域の面積」に合わせて自動で拡大・縮小させる機能が加わりました。

従来でも、img要素を使って画像を表示していれば、描画領域に合わせて自動的に画像サイズを拡大・縮小させるのは簡単でした。が、背景画像に関しては表示位置を調節するくらいしか方法がなかったのですよね。
しかし!
CSS3で追加されたbackground-sizeプロパティを使えば、背景画像を描画領域の面積に合わせて自動で拡大・縮小させ、描画領域内にぴったり合わせることも簡単になりました。

background-sizeプロパティの書き方概要

このbackground-sizeプロパティの使い方はとても簡単で、以下のようにCSSソースを書けば良いだけです。具体的な表示例などは後ほど解説しますので、まずは書き方の概要だけを紹介しておきます。

▼描画領域全体を覆い尽くすまで拡大・縮小させる場合:

background-size: cover;

background-sizeプロパティに値「cover」を指定するだけです。
※表示例と記述例は後述(→背景画像が「描画領域全体を覆い尽くす」よう拡大・縮小させる書き方)。

▼描画領域内に背景画像のすべてが表示されるよう拡大・縮小させる場合:

background-size: contain;

background-sizeプロパティに値「contain」を指定するだけです。
※表示例と記述例は後述(→背景画像が「描画領域内にすべてが表示される」よう拡大・縮小させる書き方)。

▼描画領域内に(横に)5個表示されるように拡大・縮小させる場合:

background-size: 20% auto;

background-sizeプロパティに値を2つ指定します。上記の場合は「横20%・高さ自動」の意味です。20%なら5個並び、25%なら4個並びます。
※表示例と記述例は後述(→描画領域内に(横に)4個表示されるように拡大・縮小させる書き方)。

簡単ですよね。
たったこれだけの記述で、背景画像の表示サイズが「描画領域の面積」に合うように自動調節されます。
以下に、background-sizeプロパティを使ってみた表示例と記述例をご紹介致します。

ただ背景に画像を指定した場合の表示 (比較用)

実際にbackground-sizeプロパティを使う前に、ただ背景画像だけを指定した場合にどう見えるのかを比較として掲載しておきます。
記述するCSSは、以下の1行だけです。これで背景画像(fallriver.jpg)を指定しています。

CSSソース

p {
   background-image: url('fallriver.jpg');
}

表示すると、以下のように見えます。

このように、背景画像が原寸サイズのままタイル状に表示されます。
これが普通の表示ですよね。
背景に画像を指定するスタンダードな表示が、これでしょう。

画像の原寸サイズは600×400pxなので、横幅600px以上の環境でなら、上記のサンプル領域には写真が2枚以上見えているはずです。上記の表示と、これ以降にご紹介するサンプルでの表示とを見比べてみて下さい。

背景画像が「描画領域全体を覆い尽くす」よう拡大・縮小させる書き方

これが最も用途としては多いのではないでしょうか。
1枚の背景画像を、縦横比を保ったまま、描画領域全体に広げる方法です。

CSSソース

p {
   background-image: url('fallriver.jpg');
   background-size: cover;
}

background-sizeプロパティに値「cover」を指定しています。表示すると、以下のように見えます。

背景画像が(縦横比を保ったまま)描画領域全体に広がって表示されていることがお分かり頂けるでしょう。
ウインドウサイズを変化させると、背景画像の表示サイズも合わせて変化します。
写真を使う場合、タイル状に繰り返されると不自然に見える場合があります。
そんなときには、このようにbackground-sizeプロパティを使って、描画領域の横幅一杯に背景画像を広げると良いのではないでしょうか。

なお、描画領域の横か縦かどちらか大きい方に合わせて(縦横比を保ったまま)拡大縮小されます。

背景画像が「描画領域内にすべてが表示される」よう拡大・縮小させる書き方

背景画像が途中で切れてしまうのを防ぎたい場合は、背景画像が「描画領域内にすべてが表示される」よう拡大・縮小するよう指定すると便利です。

CSSソース

p {
   background-image: url('fallriver.jpg');
   background-size: contain;
}

background-sizeプロパティに値「contain」を指定しています。表示すると、以下のように見えます。

背景画像が(縦横比を保ったまま)描画領域に収まるよう表示されていることがお分かり頂けるでしょう。
ウインドウサイズを狭めても、必ず背景画像がすべて表示されるよう表示サイズが変化します。
(描画領域が広い場合は、複数枚の背景画像が表示されます。)
画像を途中で切ることなく、確実に見せたい場合は、このようにbackground-sizeプロパティを使って、描画領域内にすべてが表示されるよう指定すると良いのではないでしょうか。

描画領域内に(横に)4個表示されるように拡大・縮小させる書き方

background-sizeプロパティでは、背景画像の表示サイズを直接指定することもできます。
「%」を使って割合で指定すれば、「何個掲載するか」を指定できます。例えば、下記のように「25%」を指定すれば、横方向に4個表示されることになります。

CSSソース

p {
   background-image: url('fallriver.jpg');
   background-size: 25% auto;
}

background-sizeプロパティに値「25% auto」を指定しています。これは、「横幅が25%」・「高さは自動」という意味です。表示すると、以下のように見えます。

背景画像が(縦横比を保ったまま)描画領域の横幅全体に4つ表示されていることがお分かり頂けるでしょう。
このように、「割合」で指定することで、表示個数を指定することもできます。

ちなみに、「25% auto」ではなく「auto 25%」と順序を逆に指定すれば、「縦方向に4つ」入るように表示されます。
なお、autoの指定を使わずに「25% 30%」などと指定すれば、縦横比は維持されなくなります。

背景画像の表示サイズを具体的に指定する書き方

背景画像の表示サイズを、「px」などの単位を使って具体的に指定することもできます。
この場合は、描画領域の面積は関係ありません。指定のサイズで表示されます。

CSSソース

p {
   background-image: url('fallriver.jpg');
   background-size: 500px auto;
}

background-sizeプロパティに値「500px auto」を指定しています。これは、「横幅が500ピクセル」・「高さは自動」という意味です。表示すると、以下のように見えます。

背景画像が、横幅500pxで表示されています。
この場合、ウインドウサイズを変化させて、描画領域の面積を横幅500px以下にした場合は、背景画像は途中で切れることになります。

この場合も、autoの指定を使わずに「500px 450px」などと指定すれば、縦横比は維持されなくなります。

というわけで、背景画像を「描画領域の面積」に合わせて自動で拡大・縮小させる方法の紹介でした。
Internet Explorerでは、IE9以降で対応しています。非対応ブラウザでも単に指定が無視されるだけで、背景画像自体は表示されますから、気軽に使えば良いのではないかと思います。(^_^;)

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---