background-position プロパティ。
CSSに於ける要素の背景画像の表示位置・background-position プロパティに関する解説です。
background-position プロパティとは。
background-position プロパティは、要素の背景画像の表示位置です。
スクロールした場合に、背景画像も合わせてスクロールさせるか、スクロールさせずに固定させるかを指定します。
background-positionプロパティの書式。
background-position プロパティの書式は、以下のようになります。
background-position: 値複数画像を用いる場合は、background-image プロパティで指定した順序に従って , で区切って列挙します。
全水準共通の値。
値としては、以下のものが取れます。
第三水準以降で使えるの値。
加えて、CSS第三水準(CSS 3)以降であれば、以下の値も認められております。
値として使えるキーワードと数値。
- キーワード
-
top- 当該要素の上端に背景画像の上端を合わせます(デフォルト)。
bottom- 当該要素の下端に背景画像の下端を合わせます。
left- 当該要素の左端に背景画像の左端を合わせます(デフォルト)。
right- 当該要素の右端に背景画像の右端を合わせます。
center- 当該要素の中央を背景画像の中央に合わせます。
この場合、
top値またはbottom値と併用している場合は横方向のみ中央合わせleftまたはright値と併用している場合は縦方向のみ中央合わせ
となります。
その他の場合は一番目なら横方向、二番目に出てきた場合は縦方向となります。
- 数値一つ
- パーセンテージの場合は当該要素のパディングを含む幅または高さに対する比率で、左右方向の場合は左端から、上下方向の場合は上端からのオフセット値となります。
- CSS第三水準の場合、
background-originプロパティで基準となる幅及び高さを、パディングを含まない範囲や、枠線をも含む範囲に変更する事が出来ます。
- CSS第三水準の場合、
background-position プロパティの記述例。
例えば、<body>要素の一番下に、横方向にのみ背景画像「Tulip.GIF」を隙間なく並べる場合は、
body {background-image: url('Tulip.GIF');background-repeat: repeat-x;background-position: left bottom;background-color: #8ECDF0;color: #000;}
と記述します。
この記述は、第三水準であれば、
body {background-image: url('Tulip.GIF');background-repeat: repeat no-repeat;background-position: left 0 bottom 0;background-color: #8ECDF0;color: #000;}
などとも記述出来ます。
background-position プロパティに関する注意事項。
CSS第三水準の書式について。
- 以下の記述には、制作者の私見が入ります。
第三水準の書式は、インターネットエクスプローラ 8.0 まででは対応出来ません。
平成23年11月13日現在、IE 8.0 の利用者がかなり多い現状を考慮すると、可能な限り全水準共通の値の書式で記述した方が安全と思われます。
WAP 2.0での注意事項。
WAP 2.0でも background-position プロパティは必須ですが、KDDI/沖縄セルラーのEZウェブ対応端末に搭載されているミリアド社のWAP 2.0 ウェブブラウザ(オープンウェーヴ社から事業譲受)には実装されておりません。
- 但し、WAP 2.0では数値指定は任意実装となっております。