• RSS

[CSS]背景画像のサイズを変更できるプロパティ「background-size」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-size を使うことができます。

background-image: で背景画像を指定して、background-size: で背景画像のサイズを調整してあげます。

CSS3 なのでIE 下位バージョンでは無理かな…ということで、スマフォサイトを構築する時には結構使うプロパティです。

background-size: プロパティの利用例

こんな感じでCSS ファイルに記述します。
#nav		{
	background-image:url(../sample.jpg)
	-moz-background-size:cover;
	background-size:cover;
}
background-size: の値を変えて、以下に簡単なサンプルを載せました。

※背景画像ファイルのサイズは256 × 256px です。
違いが分かりやすいように、背景エリアの幅と高さは 150 × 100pxにしています。


background-size:auto

 


background-size:contain

 


background-size:cover

 


background-size:○px

 


background-size:○%

 


background-size: の値のまとめ

background-size: の値は以下のようになっています。

auto自動算出(初期値)
contain縦横比は保持。背景領域に収まる最大サイズに拡大縮小
cover縦横比は保持。背景領域を完全に覆う最小サイズに拡大縮小
pxpxで直接数値を指定
%%で直接数値を指定



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください