Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

background-size

背景画像の大きさを指定できます。

サンプルコード

div.test { background-size: auto;}
div.test1 { background-size: contain;}
div.test2 { background-size: cover;}
div.test3 { background-size: 50%;}
div.test4 { background-size: 50px 100px;}

指定可能な値一覧

値	概要
auto	値に『auto』とだけ取った場合は背景画像そのままの大きさで描画されます。2つ目の値に『auto』と取った場合は1つ目の値に合わせて背景画像の縦横比を維持したまま拡大縮小されます。
contain	背景画像の縦横比を保持した状態で、背景が描画される領域を覆うサイズの大きさで描画されます。
cover	背景画像の縦横比を保持した状態で、背景が描画される領域に収まる最小サイズの大きさで描画されます。
数値	背景画像の大きさを数値で指定できます。使用可能な単位は『px』、『%』などです。『%』を使用した場合は背景描画領域の大きさに対する割合で描画されます。

ブラウザでの表示結果

※背景画像は以下を使用しています。デフォルトの画像の大きさは横『100px』縦『100px』です。確認を容易にする為、背景画像の繰り返しは無効にしています。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: auto;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: cover;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: contain;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: 50%;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: 50px 100px;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

背景画像の大きさを指定できます。

キーワードならば1つの値、1つ目の値が数値で指定された場合のみ最大2つの値を取ることができます。

数値で2つの値を取った場合、1つ目の値は横のサイズ、2つ目の値は縦のサイズの指定になります。数値で1つの値のみを指定した場合、2つ目の値は『auto』が指定されたと認識されますので背景画像の縦横比を維持したまま拡大縮小されて描画されます。

数値で値を取る場合で『%』を使用した場合は背景描画領域に対する割合で描画されます。背景画像の大きさに対する割合ではないのでご注意下さい。背景画像の大きさに合わせて描画させたい場合は背景画像の大きさから算出した数値を直接『px』などで指定する必要があります。背景画像の大きさから自動で大きさを決定させることはCSSのみではできません。

背景描画領域の大きさを変更するには『width』プロパティや『height』プロパティなどで要素の大きさを変更するか、『background-clip』プロパティで背景の適応範囲を変更してください。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル