0

background-sizeについて…

background-sizeについて…

背景の指定をする際に用いる「backgroundプロパティ」ですが、画像を配置したい場合「background-image」プロパティで任意の画像を指定します。その際に「background-sizeプロパティ」で画像のサイズを指定することができます。

今回は、この「background-sizeプロパティ」について見ていきたいと思います。

 

 

1.background-sizeとは?

background-size「背景画像のサイズ」を指定するプロパティで、backgroundプロパティ、もしくはbackground-imageプロパティと併用する必要があります。

 

2.指定できる値

background-sizeプロパティに指定できる値は以下の通りです。

  • auto(デフォルト)
  • contain
  • cover
  • 横値&縦値

 

それぞれサンプルを見ながら確認してみてください。

▼サンプルとして背景画像はこちらを使用しています。

 background-size-image
幅900px 高さ600pxになります。

 

●共通CSS

 

2-1.contain

背景画像の縦横比を保持したまま、常に背景画像の全体を表示させたい時に指定します。ウィンドウサイズが広くなると指定した要素の高さ100%に合わせ、狭くなると指定した要素の横幅100%に合わさる。

DEMO1

 

2-2.cover

 背景画像の縦横比を保持したまま、指定した要素に背景画像がフィットします。見えない部分は表示されず隠れるようになります。

DEMO2

 

2-3.100% 100%

 背景画像の縦横比を保持しないで常に指定した要素100%表示。ウィンドウサイズによって画像が歪んで表示されます。

DEMO3

 

2-4.100% auto

 指定要素の横幅を優先して背景画像が横幅100%となり、縦横比を保持して高さは自動調整。

DEMO4

 

2-5.auto 100%

 指定要素の高さを優先して背景画像高さ100%となり、縦横比を保持して横幅は自動調整。

DEMO5

 

このようにCSSのみで簡単に背景画像を好みのサイズに指定することができます。 スマートフォンやタブレットなどのウィンドウサイズに合わせた表示をしたい時などに使えそうですね。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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

mororeco > CSS > background-sizeについて…