CSS3 Pre-Reference



background-position

背景画像の位置

試す

サンプル

画像がテキストに従って表示されていれば対応しています。

一つの背景の位置指定。右上に赤丸。

複数の背景の位置指定。右上に赤丸、左上に青丸、右下に緑の丸。

コメントする


対応ブラウザ

Firefox
すべて
Chrome/Safari
すべて
Opera
すべて
InternetExplorer
すべて

パラメータ

<背景位置> [ , <背景位置> ]*
初期値 0% 0%
適用 すべての要素
継承 しない
レベル 1
%の解釈 要素のサイズと背景画像のサイズで利用。
適用メディア Visual
参考文献 CSS Backgrounds and Borders Module Level 3#3.6. The ‘background-position’ property

解説

背景画像の位置を指定します。

複数の背景指定が可能になったのに伴い、位置も複数指定できるようになっています。

また、大幅に書式が改善されています。

まず、CSS2.1まで利用できなかったキーワードとパーセンテージ/長さとの併用が可能になりました。”right 10px”や”20% bottom”などの記述が可能です。ただし、必ず左右方向、上下方向の順に指定するという別の制約ができました。つまり、CSS2.1と互換性が無い部分があります。”top left”はCSS2.1までは有効ですが、CSS3では無効です。

また、右から2cm、下から10pxといった細かな指定が可能になりました。”right 2cm bottom 10px”といったふうに指定します。ただし、”center”からの位置指定はできません。”center 10px bottom”などの書き方は無効となります。

複数背景には、IEは9から、Firefoxは3.6から、Safari/Chromeは1.3から、Operaは10.5から対応しています。

トラックバック

投稿されたコメント