MK2-BLOG~西宮のWEBデザイナー日記

女性WEBデザイナーの日記、WEB制作に関連すること

CSS3メモ~背景画像のサイズを固定する

time 2014/02/14

レスポンシブデザインの際に背景画像やロゴなどがサイズにより可変する時に使えるCSS3です。
良く忘れるので備忘録。

background-size

プロパティには値として次の3つが使えます。

auto
自動的に算出されます
contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小します
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小します

また常に表示される場合を使うには
-moz-background-size:contain;
background-size:contain;

というようにcontainをうまく使うことが必要です。

にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

sponsored link

down

コメントする




フリー素材

マウスコンピューター/G-Tune

アーカイブ

スポンサードリンク