cssで背景画像のサイズを変えよう!background-sizeまとめ

背景画像の設定方法

背景画像のサイズを縮小したり、拡大したり、サイズを変更したい時ってありますよね。 そういう時は、cssのbackground-sizeプロパティを使うと簡単にできます

background-sizeを使うと画面いっぱいに背景画像を表示したりすることもできちゃいます。 そんな便利なbackground-sizeの使い方やテクニック詳しく紹介していきますねー(^^)/

※このページは「【css】背景(backgroundプロパティ)の使い方まとめ」の続きです。backgroundプロパティ全般について詳しくはそちらをご覧下さい。

目次
background-sizeを古いブラウザに対応させるには

background-sizeプロパティの使い方

background-sizeプロパティでは、背景画像のサイズを指定することができます。

サイズを指定する方法は、数値にpxなどの単位やパーセンテージ(%)を付けて指定する方法、キーワードで指定する方法があります。 では、それぞれの方法を紹介していきますね。

background-size: 幅 高さ;

背景画像のサイズを単位付きの値で指定

pxなどの単位付きの値やパーセンテージ(%)で画像サイズを指定する場合、background-size:10px 15px;のように値を2つ記述すると、それぞれ記述した順に「幅」「高さ」が設定されます。 この場合でいうと、背景画像の幅が10px、高さが15pxということ。

値を1つだけ、記述した場合は、高さが「auto」に設定されます。 ちなみに「-10px」のように負の値を記述する事はできませんので注意。

それと、指定したサイズが実際の背景画像のサイズと違う場合は、指定したサイズに合わせて背景画像が「拡大」「縮小」されます。

使える値 意味
pxなどの単位つきの値 背景画像の幅と高さをpxなどの単位付きの値で指定できる。1つしか値を設定しなかった場合は、「高さ」が「auto」となる
パーセンテージ(%) 表示領域に対するパーセンテージ(%)で背景画像の幅と高さを指定する。1つしか値を指定しなかった場合は、「高さ」が「auto」となる
.example{
  background-image:url(image/img.jpg);
  background-repeat:no-repeat;
  background-size:100px 200px;
}
background-sizeを単位付きの値で指定した場合の表示例
.example{
  background-image:url(image/img.jpg);
  background-repeat:no-repeat;
  background-size:25% 50%;
}
パーセンテージを使った場合の表示例

背景画像のサイズをキーワードで指定

画面のサイズに合わせた背景画像の表示サイズをキーワード使って指定できます。 一つ注意点なのですが、covercontainといったキーワードで背景画像のサイズを指定する場合は、必ずhtml要素とbody要素の高さを「100%」にしておきましょう。

html,body{ height:100%;}
キーワード 意味
auto 画像の元のサイズで表示される。(初期値)幅、高さの片方だけにautoを設定すると画像の元のサイズの縦横比を保ったまま、もう片方に合わせたサイズが設定される
cover 縦横比を保持して、背景画像1枚分で表示領域を完全に覆うサイズに拡大・縮小される
contain 縦横比を保持して、常に背景画像が全体に表示されるサイズに拡大・縮小される

cover

background-sizeにcoverを設定すると背景画像が画面いっぱいに、常に表示されるようになります。

coverの場合は常に画面いっぱいに表示されるので、画面のサイズによっては背景画像の一部がはみ出すというか、途切れたように見える場合があります。 それとブラウザのサイズ(ウィンドウのサイズ)を変えても、常に画面いっぱいに表示されます。

html,body{ height:100%;}

.example{
  background-image:url(image/img.jpg);
  background-position:center;
  background-size:cover;
}
<!--省略-->
</head>
<body>
</body>
</html>
background-size、coverの表示例

contain

containは画面のサイズに関係なく、常に背景画像の全体が表示されるようになります。

縦横比を保ったまま、背景画像の全体が表示されるので、画面の横や縦に空白の部分が生まれる事があります。 ちなみに背景画像が画面に収まる最大のサイズで常に表示されます。

html,body{ height:100%;}
.example{
  background-image:url(image/img.jpg);
  background-position:center;
  background-size:no-repeat;
  background-size:contain;
}
<!--省略-->
</head>
<body>
</body>
</html>
background-size、containの表示例

background-sizeを古いブラウザに対応させるには

背景画像を拡大・縮小させるbackground-sizeプロパティは、css3から加わった機能です。 なので古いバージョンのブラウザでは、対応してない場合があります。

そこで、古いブラウザにもbackground-sizeプロパティを対応させるための記述をする必要があります。

書き方は簡単で、下をコピペして「cover」の部分を自分の使いたいキーワードや値に変えるだけ! めっちゃ簡単です。

.example{
  background-image:url(image/img.jpg);
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  background-size:cover;
}

これで下のブラウザに対応できます。

【対応ブラウザ】
IE 9以上, Chrome, Firefox 3.6以上, Safari 3以上, Opera 10以上

めっちゃ簡単なんですが、上の記述だとIE8以下に対応してません

ie8以下は気にしなくてもいいと思いますが、どーしてもIE8以下にbackground-sizeを対応させたいって時は、jQueryを使う方法があります。 jQueryといっても基本的にはコピペで終わるので簡単です。 ですが、設置の仕方などを説明するとちょっと長くなるので、別記事で紹介しますね。

以上、background-sizeについてでしたー(^^♪ 長々読んで頂きありがとうございます(^^)/

頂いたコメント

  1. はまぞふ より:

    ゆうさん、こんにちは。
    はまぞふです。

    スタイルシートに詳しいですね^^
    僕は、スタイルシートは苦手なので、
    尊敬します^^

    古いブラウザは、たまにありますから、
    最近追加された機能が効かない事がありますね^^;

    僕は諦めてしまいますが、
    そこまで対応しようとするのが凄いです。

    今後の参考にさせて頂きます。

    応援完了です^^

    • ゆう。 より:

      はまぞふさん、こんにちわ(^^♪

      実は記事には、書いてるんですけどね、私はie8以下は
      切り捨てでいいかなと思って、このブログは対応させてないんですよねw

      backgroundサイズだけなら、まだしも効かない機能が色々ありますしね( ̄▽ ̄)

      でも、対応させるなら是非参考にして頂ければ嬉しいです(^^♪

      応援ありがとうございます!!

  2. マレク より:

    こんにちは。
    CSSを自分で変えてサイトを思い通りに作れると面白みもあるのでしょうね。
    自分の納得のいくサイト作成には欠かせない知識スキルですよね。
    参考になります。

    • ゆう。 より:

      マレクさん、こんにちわー(^^)/

      なにより、自分の好きな形にできるってところが面白いですよね(^-^)

      あとcssとhtml知ってると、
      seoの内部対策も自分でできるようになるってところがいいですよ(^^♪

      もし知らない所があったら是非参考にして頂ければほんと嬉しいです(^-^)

      いつもありがとうございます(^-^)

  3. さゆこ より:

    さゆこと申します
    ランキングから来ました。

    私はまだcssとか苦手なので
    これから色々と参考にさせて頂きたいです^^
    またお邪魔しますね!

    応援していきます♪

    • ゆう。 より:

      さゆこさん、こんにちわ(^^♪

      ぜひぜひ、遊びに来てくださいねー(#^^#)
      出来るだけ分かりやすいように書いていくので、
      是非参考にして頂ければ嬉しいです(^^)/

      応援感謝です!!