背景画像の大きさ

背景画像の大きさを変更するには、background-sizeプロパティを使用します。
なお、このプロパティはgradient関数も適用されます。

【構文】

							background-size:キーワード;
							または
							background-size:縦横幅の値;
							または
							background-size:横幅値 縦幅の値;
						

指定可能な値

説明 初期値
auto 自動的に算出(元の画像の大きさ)
contain 縦横比を保持し画像の最大幅に収まるようにする -
cover 縦横比を保持し画像の最小幅に収まるようにする -
数値 + 単位 指定幅の大きさ -

サンプル

サンプルでは、background-repeatプロパティをno-repeatに設定しています。

auto

contain

cover

20px

20px 50px

CSS3逆引きリファレンス一覧へ戻る