<< スタイルシート(CSS) background-repeat | Home | スタイルシート(CSS) background-attachment >>

スタイルシート(CSS) background-position

今回はbackground-positionプロパティの解説です。
background-positionプロパティは、指定した背景画像の表示位置を指定するのに使用します。

background-position: 値;

値には「表示位置」を左上角を起点にした横位置と縦位置を%か単位付きの数値、あるいはキーワードで指定します。

pxなどの単位付きの数値で指定する場合は、画面の解像度に依存するので必ず全て同じように表示されるわけでないことを考慮しましょう。ちなみにマイナスでの指定も出来ます。
上記のことからbackground-positionの値は、%で指定した方が間違いないでしょう。
キーワードは以下のような値を指定します。
キーワード: left right center top bottom

次のように間に半角スペースを入れ横位置と縦位置の順に指定します。
値に一つしか指定しなかった場合は、横位置だけ指定したことになり縦位置は「50%」を指定したことになります。
background-position: 横位置 縦位置;

また、キーワードで指定したときは「left」「top」は「0%」、「center」は「50%」、「right」「bottom」は「100%」を指定したのと同じになります。
値を一つしか指定しなかったときは、片方が「center」を指定したのと同じになります。


それでは300×300のボックスに下のような50×50の画像を背景画像に指定し、background-repeatでno-repeatを指定した上で、background-positionを指定します。。
背景画像



「background-position:50% 50%;」を指定。



「background-position:100% 100%;」を指定



「background-position:50% 100%;」を指定



「background-position:50% 100%;」を指定


上のようなボックスの中で指定すると解りませんが、background-positionを「body」に指定するとブラウザを大きくしたり小さくしたりすることで、表示位置が変ることを覚えておきましょう。

Calendar

  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>

Recent Entries


Categories


Archives


Profile


Valid XHTML 1.0 Transitional

Valid CSS!

Comments

Leave Comment










Trackbacks

Trackback URL

Recent Comments

Recent Trackbacks