backgroundPosition

Edit New

backgroundPosition

[1] HTMLayout CSS support map <http://www.terrainformatica.com/htmlayout/cssmap.whtm#background-position-attribute>

left-side-length, top-side-length, right-side-length, bottm-side-length

Expandable filling image margins. See Expandable tiling section in HtmLayout documentation. To use extended fill background background-repeat attribute should be equal to 'expand'. Non standard. HTMLayout specific.

(名無しさん [sage])

[2] background-positionの%値について (みりばーる 著, 2007-07-09 21:26:58 +09:00 版) <http://mb.blog7.fc2.com/blog-entry-67.html> (名無しさん)

[3] CSS_XHTML_TIPS:CSS-TIPS CSSで背景画像位置調整に関するNetscapeバグ (2007-05-15 09:54:06 +09:00 版) <http://blog.livedoor.jp/cssxhtml/archives/53486877.html>

バグだといっているが、 CSS 2(.0) 的には Netscape 7 の動作で正しい。 (名無しさん)

[4] Firefox 2 は background-position が CSS に指定されていると CSSOM 上は (for..in や getPropertyValue で得られるのは) -x-background-x-position や -x-background-y-position に分解されますが、対応する DOM 属性はないようです。 DOM 属性 backgroundPosition も常に空文字列のようです (background-position を setProperty に指定すれば得られるようです)。 -x-background-x-position の方を CSS に指定したり、 setProperty に指定したりすると、内部的に飲み使われるプロパティを使用しようとしました。というエラーがエラーコンソールに出て無視されます。

getComputedStyle の方も同様ですが、 getPropertyValue でも3特性とも空文字列のようです。 backgroundPosition も空文字列です。 (名無しさん)

[5]

(名無しさん)

[6]

(名無しさん)

[7] Firefox 2、WinIE 6、Opera 9 のいずれも、 1つか2つ値を指定できます。 Firefox と Opera では間に0個以上の空白があればいいですが、 WinIE では1つ以上ないと宣言ごと無視されます。

[17] 値の1つが鍵語でもう1つが <length> や <percentage> のとき、 順序が CSS 2.1 に照らして誤っていると、Firefox 2 と Opera 9 は宣言ごと無視しますが、 WinIE 6 は順序を入れ替えて解釈します。

[16] >>17 Chrome と Firefox のどちらも無視しました。

[18] Opera では CSSOM 上に現れる値はキーワードを <percentage> に変換したものです。 WinIE や Firefox ではキーワードもそのまま現れます。

[19] >>18 Firefox はキーワードそのままですが Chrome は <percentage> に変換して CSSOM に現れます。

[20] 値が1つだけのときに補われる値は3ブラウザとも 50% です (CSS 2.1 では center (結局同義ですが))。

[21] >>20 現在の Firefox では center になっています。 Chrome では 50% です。

[22] 3ブラウザとも CSSOM に現れる値では x y の順に正規化されるようです。

[8] WinIE 6 で background-position-x か background-position-y の一方だけを設定すると、 backgroundPosition の値は他方が空文字列になるようです。 レンダリング上は初期値 (0% 0%) から変更なしとみなされるようです。

(名無しさん)

[9] WinIE 6 と Opera 9 は常に値2つともを出力するようですが、 Firefox 2 は2つの値が同一なら1つだけしか出力しないようです (center や 50% 以外のときまでこれをしてしまうのは誤り)。

[10] >>7 Firefox 2 で値が1つだけの時に補われる値は、その1つが鍵語の場合、もう1つも鍵語になるようです。

[24] >>9 現在の Firefox と Chrome は必ず2つの値を出力するようです。

[11] 複数の画像を1つの画像にまとめ、 background-position や width や height を使って適当な一部分だけを表示するという手法が採られることがあります。 画像の取得のためのトラフィックを抑制するためには有用です。 例えば :hover 時に画像を変更する場合などで画像読み込みのために表示までにやや遅延が生じてしまいますが、 予め読み込まれている1つの画像の background-position を変更するだけならキャッシュから読み込むので瞬時です。

[12] ただし、この手法は background-position などを指定通りに解釈しない利用者エージェントで表示すると意味がわからなくなるので注意が必要です。 例えば Opera の携帯電話版で Google を表示すると、 Google のロゴや矢印ボタンなどすべてがまとまった画像が意味不明に表示されていたりします。

[13] Bug 3935 – mozilla-native pseudo classes and properties should be marked as such [SELECT] ( 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=3935>

[14] Bug 3935 – mozilla-native pseudo classes and properties should be marked as such [SELECT] ( 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=3935>

[15] [css3-background] background-position-x background-position-y ( (Florian Rivoal 著, 版)) <http://lists.w3.org/Archives/Public/www-style/2012Feb/0618.html>

[23] 奇癖モードについては無単位長奇癖を参照。

[25] Chrome では inherit など CSS-wide keyword を指定して取得すると inherit inherit のような再度構文解析できない値になります。

[26] Issue #9. Add note about -webkit-background-x/-y · whatwg/compat@bba2cb0 ( 版) <https://github.com/whatwg/compat/commit/bba2cb0690bb46d8f944b82579fff505a4705d48>

Updated: