背景画像の拡大縮小〜background-size

HTML&CSS
スポンサーリンク

background-sizeプロパティについて

背景画像をCSSで設定するにはbackground-imageプロパティを使用します。

CSS3background-sizeプロパティは、背景画像の幅・高さを拡大・縮小することができます。ただし、拡大すると画像の劣化が起こりますので注意してください。
CSS3ですからIE8以下のバージョンでは未対応です。

background-sizeの値は、「auto」、「contain」、「cover」、「横 縦」の4パターンがあります。

background-sizeプロパティの値について

background-size:auto

auto は背景画像を画像の縦横比率が維持したまま拡大縮小します。
初期値はautoです。background-size プロパティの値をセットした後にショートハンドプロパティ background を使用した場合に初期値が適用されます。
autoのサンプル1 autoのサンプル2

background-size:contain

containは、背景画像が表示するBOXと同じか小さな幅と高さを持つことが保証される範囲で、なるべく大きくすべきであることを示します。
containのサンプル1 containのサンプル2

background-size:cover

coverは、背景画像が表示するBOXと同じか大きな幅と高さを持つことが保証される範囲で、なるべく小さくすべきであることを示します。表示するBOXに背景画像が常にある形でフィットします。
背景画像がはみ出す場合は、はみ出た部分は見えません。
coverのサンプル1 coverのサンプル2

background-size:100% 100%

背景画像は指定サイズで描画されます。
100%のサンプル1 100%のサンプル2

heightのパーセント指定の注意点

ボックス要素を「height:100%」で指定しても、その要素そのものの高さにしかなりません。
これは親要素の高さに依存するからです。親要素に高さの指定がない場合は子要素をheight:100%に指定してもautoになります。
ボックス要素の高さを100パーセントにするには親要素の高さを決めます。
例えば親がbodyの場合は以下のようにします。

html,body{
  height: 100%;
}
#container{
  width:100%;
  height:100%;
}
スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発

コメント

  1. […] 画像の横幅または縦幅がゼロに解決される場合、その画像は表示されなくなります(その効果は、画像が透明であったときと同じになります)。 こちらのページも参考にしてください。 […]

タイトルとURLをコピーしました