ywork2020.com

Title

背景画像のサイズを設定する

目次 (INDEX)

background-sizeとは

background size とは次の語句からなるプロパティ名です。
background
読み: バックグラウンド
意味: 背景、景色
size
読み: サイズ
意味: 大きさ

目次に戻る

background-sizeプロパティの概要

このプロパティは背景の画像のサイズを設定するためのプロパティです。

サイズの指定は決められたキーワードの他に数値によるパーセント指定や、ピクセルなどの単位の指定も できます。

このプロパティはbackgroundプロパティのメンバーの一つですので、他のbackgroundプロパティメンバーと組み合わせる ことにより、画像の表示にバリエーションを持たせることができます。

目次に戻る

実機サンプルとサンプルコード

このプロパティは背景に使用された1画像辺りのサイズを指定します。

構文

セレクター{background-size: 設定値}

初期値: auto auto

初期値のauto とはオートと読み、「自動」という意味になります。 これは親要素のサイズを基準に100%の自動調整で画像が表示されます。 なお、「auto auto」とautoが2回繰り返しているのは「左側が画像の横幅」で「右側が画像の高さ」を指定しています。 つまり横幅と高さを自動で調整しているということになります。

div{background-size: auto auto;}

目次に戻る

数値で画像の大きさを指定する

設定値が一つの場合は画像の横幅を指定したことになり、高さはautoとなります。

div{background-size: 50%;}
div{background-size: 50% auto;}
上記の1行目と2行目のコードは同じ効果があります。

目次に戻る

キーワードで画像の大きさを指定する

使用できるキーワードは次の2つです。

  • cover = 画像を切り取ったり、横幅と縦幅の比率を変えることなく、画像ができるだけ大きくなるよう拡大縮小します
  • contain = 横幅と縦幅の比率を変えることなく、画像ができるだけ大きくなるよう拡大縮小しますが、比率の問題で空き領域 が残らないように画像の切り取りを行います。
cover

div{background-size: cover;}
div{background-size: contain;}

目次に戻る

複数の背景画像の大きさを指定する

このサンプルではサッカーボールのpng画像と花柄の壁紙画像を予め表示しています。

background-imageプロパティで「,」カンマ区切りを使って画像を2つ表示しているので、background-sizeプロパティでも「,」 カンマ区切りで、サイズを2つ指定することで各画像のサイズを別々に指定することができます。

div{
	background-image: url(soccer-ball.png), url(flower-back.jpg);
	background-size: 50%, 100%;
}

目次に戻る

グローバル値

background-sizeプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のauto autoに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

background-size: 50%;

background-size: 50% 33%;

background-size: 20px;

background-size: cover;

background-size: contain;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る