背景の指定をする際に用いる「backgroundプロパティ」ですが、画像を配置したい場合「background-image」プロパティで任意の画像を指定します。その際に「background-sizeプロパティ」で画像のサイズを指定することができます。
今回は、この「background-sizeプロパティ」について見ていきたいと思います。
1.background-sizeとは？
background-size「背景画像のサイズ」を指定するプロパティで、backgroundプロパティ、もしくはbackground-imageプロパティと併用する必要があります。
2.指定できる値
background-sizeプロパティに指定できる値は以下の通りです。
- auto（デフォルト）
- contain
- cover
- 横値＆縦値
それぞれサンプルを見ながら確認してみてください。
▼サンプルとして背景画像はこちらを使用しています。
幅900px 高さ600pxになります。
●共通CSS
|
1 2 3 |
background-image: url(画像URL); background-position: top center; background-repeat: no-repeat; |
2-1.contain
|
1 |
background-size: contain; |
背景画像の縦横比を保持したまま、常に背景画像の全体を表示させたい時に指定します。ウィンドウサイズが広くなると指定した要素の高さ100％に合わせ、狭くなると指定した要素の横幅100％に合わさる。
2-2.cover
|
1 |
background-size: cover; |
背景画像の縦横比を保持したまま、指定した要素に背景画像がフィットします。見えない部分は表示されず隠れるようになります。
2-3.100% 100%
|
1 |
background-size: 100% auto; |
背景画像の縦横比を保持しないで常に指定した要素100％表示。ウィンドウサイズによって画像が歪んで表示されます。
2-4.100% auto
|
1 |
background-size: 100% auto; |
指定要素の横幅を優先して背景画像が横幅100%となり、縦横比を保持して高さは自動調整。
2-5.auto 100%
|
1 |
background-size: auto 100%; |
指定要素の高さを優先して背景画像高さ100%となり、縦横比を保持して横幅は自動調整。
このようにCSSのみで簡単に背景画像を好みのサイズに指定することができます。 スマートフォンやタブレットなどのウィンドウサイズに合わせた表示をしたい時などに使えそうですね。