説明
background-position: position; C1- ie4- N6-
使用例
body {
background-image:url("logo.png");
background-attachment:fixed;
background-position:100% 100%;
background-repeat:no-repeat
}
このように指定することで、一枚のロゴ画像を右下隅に表示させることができます。
背景画像の表示位置 <'background-position'> |
|
「0% 0%」=「top left」=「left top」 「50% 0%」=「top」=「top center」=「center top」 「100% 0%」=「right top」=「top right」 「0% 50%」=「left」=「left center」=「center left」 (ie8- -ff3 -o9 -sf4 -gc2未対応) 「50% 50%」=「center」=「center center」 (ie8- -ff3 -o9 -sf4 -gc2未対応) 「100% 50%」=「right」=「right center」=「center right」 (ie8- -ff3 -o9 -sf4 -gc2未対応) 「0% 100%」=「bottom left」=「left bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応) 「50% 100%」=「bottom」=「bottom center」=「center bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応) 「100% 100%」=「bottom right」=「right bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応) CSS2.1の仕様書におけるキーワードと長さや%値との組み合わせ (ie8- -ff3 -o9 -sf4 -gc2未対応)
表示位置のキーワード
「0% 0%」=「top left」=「left top」
「50% 0%」=「top」=「top center」=「center top」
「100% 0%」=「right top」=「top right」
「0% 50%」=「left」=「left center」=「center left」 (ie8- -ff3 -o9 -sf4 -gc2未対応)
「50% 50%」=「center」=「center center」 (ie8- -ff3 -o9 -sf4 -gc2未対応)
「100% 50%」=「right」=「right center」=「center right」 (ie8- -ff3 -o9 -sf4 -gc2未対応)
「0% 100%」=「bottom left」=「left bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応)
「50% 100%」=「bottom」=「bottom center」=「center bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応)
「100% 100%」=「bottom right」=「right bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応)
*1 CSS2.1においてbackground-positionプロパティにおいて、「キーワードを、長さや%値と組み合わせることはできません」という記述が削除されました。つまり、「top 25%」という記述も許可されます(ie8- -ff3 -o9 -sf4 -gc2未対応)。
