リサイズするボックスにあわせて背景画像のサイズを拡大縮小する!

141119-01

CSS3から、背景がゾノ幅や高さを拡大縮小するプロパティが追加されています。
簡単に、可変するボックスの領域にあわせて、背景画像の大きさがかわるCSSの表記についてまとめておきます。

拡大縮小することで、当然ながら画像劣化あります。
デザイン上問題かどうかは、サイトの使い方や表現によってだと思います。最近のブラウザは優秀で、適度にスムージングされるので活用してみるのも一つの手ではないでしょうか?
画像の荒さを補完できるコンテンツ力で勝負しましょう!!

Safari、Google Chrome、Operaですでに実装されています。
Firefoxもプリフィックス「-moz-」で適用されます。

background-size

background-sizeの値は、「auto」「contain」「cover」「横 縦」の4種類が用意されています。

指定要素に背景画像が常にある形でフィット – cover –

div{
background-image:url(画像URL);
background-position:center top;
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:cover;
}

背景画像の縦横比を保持したまま、指定要素に背景画像が常にある形でフィットします。
背景画像がはみ出すイメージです(はみ出た部分は見えない)。

背景画像が常に表示される形でフィット – contain –

-moz-background-size:contain;
background-size:contain;

背景画像の縦横比をそのまま、常に背景画像の全体を表示させたいときに使用します。
本来、装飾のためではない画像であれば背景画像ではなくimgタグで実装すべきですが、フォトサイトで威力発揮しそうです。

縦:横 = 100%:100%

-moz-background-size:100% 100%;
background-size:100% 100%;

背景画像の縦横比を保持しません。リストとかのサムネイルで画像サイズを統一させたいときに威力発揮です。

縦:横 = auto:100%

-moz-background-size:100% auto;
background-size:100% auto;

指定要素の横幅と背景画像の横幅が一致。背景画像の縦横比を保持し、高さは自動設定。

縦:横 = 100%:auto

-moz-background-size:auto 100%;
background-size:auto 100%;

指定要素の高さと背景画像の横幅が一致。背景画像の縦横比を保持し、幅は自動設定。

 

オシャレ!参考にしたいバナーをまとめたサイト5選

2015.10.19

スモール・ビジネスのためのWordPress用の30テーマ

2015.08.27

ワンランクUP!知っておきたいphotoshopの技 -チュートリアル21選-

2015.01.08

写真をコミック風(漫画)イラストに加工したい!さらに+αも。

2013.09.23

Photoshopで黒板チョーク風な文字フォントを作る方法

2013.09.04

141119-01

ABOUTこの記事をかいた人

GeoDesign

ホームページは、情報収集が得意なメディアです。 集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。
  • 成果の見えるホームページを運用したい。
  • デジタルマーケッターになれる広報担当者を育成したい。
  • 自社メディアでブランド力の強化と、顧客創造を図りたい。
こんな欲求をかかえるあなた。
  • どうしたらウェブサイトから成果が上がるのかわからない
  • 簡単に運用できるシステム、時間ロス・コストロスを減らしたい
こんな悩みをかかえるあなた。 私達にその欲求や悩みを改善するお手伝いを任せてみませんか?