Edit

Page

Page title:

Page body:

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

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

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

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

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

[5]

- 
[CODE(CSS)@en[[[background-position]]: 20[[px]] [[top]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20%20background-position%3A%2020px%20top%3B%0A%7D%0A;h=%3Cp%20onclick%3D%22%0A%20%20var%20s%20%3D%20%20sd()%2F%2FgetComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null)%3B%0A%20%20%2F%2Fs.setProperty%20('-x-background-x-position'%2C%20'10%25'%2C%20null)%3B%0A%20%20var%20v%20%3D%20s.getPropertyValue%20('background-position')%3B%0A%20%20w%20(typeof%20(v)%20%2B%20'%2C%20%26%23x22%3B'%20%2B%20v%20%2B%20'%26%23x22%3B')%3B%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20value%20of%20the%0A%3Ccode%3EgerPropertyPriority%20('color')%3C%2Fcode%3E%20method.%0A;p=n;x=style-element>
- 
[CODE(CSS)@en[[[background-position]]: 20[[px]] [[bottom]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20%20background-position%3A%2020px%20bottom%3B%0A%7D%0A;h=;p=n;x=style-element>
- 
[CODE(CSS)@en[[[background-position]]: 20[[px]] [[center]]]]
(y が 50%)
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20%20background-position%3A%2020px%20center%3B%0A%7D%0A;h=%3Cp%20onclick%3D%22%0A%20%20var%20s%20%3D%20%20sd()%2F%2FgetComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null)%3B%0A%20%20%2F%2Fs.setProperty%20('-x-background-x-position'%2C%20'10%25'%2C%20null)%3B%0A%20%20var%20v%20%3D%20s.getPropertyValue%20('background-position')%3B%0A%20%20w%20(typeof%20(v)%20%2B%20'%2C%20%26%23x22%3B'%20%2B%20v%20%2B%20'%26%23x22%3B')%3B%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20value%20of%20the%0A%3Ccode%3EgerPropertyPriority%20('color')%3C%2Fcode%3E%20method.%0A;p=n;x=style-element>
- ([[CSS 2.1]] によれば[[非妥当]])
[CODE(CSS)@en[[[background-position]]: 20[[px]] [[left]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20%20background-position%3A%2020px%20left%3B%0A%7D%0A;h=%3Cp%20onclick%3D%22%0A%20%20var%20s%20%3D%20%20sd()%2F%2FgetComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null)%3B%0A%20%20%2F%2Fs.setProperty%20('-x-background-x-position'%2C%20'10%25'%2C%20null)%3B%0A%20%20var%20v%20%3D%20s.getPropertyValue%20('background-position')%3B%0A%20%20w%20(typeof%20(v)%20%2B%20'%2C%20%26%23x22%3B'%20%2B%20v%20%2B%20'%26%23x22%3B')%3B%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20value%20of%20the%0A%3Ccode%3EgerPropertyPriority%20('color')%3C%2Fcode%3E%20method.%0A;p=n;x=style-element>
- ([[CSS 2.1]] によれば[[非妥当]])
[CODE(CSS)@en[[[background-position]]: 20[[px]] [[right]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20%20background-position%3A%2020px%20right%3B%0A%7D%0A;h=%3Cp%20onclick%3D%22%0A%20%20var%20s%20%3D%20%20sd()%2F%2FgetComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null)%3B%0A%20%20%2F%2Fs.setProperty%20('-x-background-x-position'%2C%20'10%25'%2C%20null)%3B%0A%20%20var%20v%20%3D%20s.getPropertyValue%20('background-position')%3B%0A%20%20w%20(typeof%20(v)%20%2B%20'%2C%20%26%23x22%3B'%20%2B%20v%20%2B%20'%26%23x22%3B')%3B%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20value%20of%20the%0A%3Ccode%3EgerPropertyPriority%20('color')%3C%2Fcode%3E%20method.%0A;p=n;x=style-element>

([[名無しさん]])

[6]

- [CODE(CSS)@en[[[background-position]]: [[left]] 20[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20%20background-position%3A%20left%2020px%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20var%20s%20%3D%20%20sd()%2F%2FgetComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null)%3B%0D%0A%20%20%2F%2Fs.setProperty%20('-x-background-x-position'%2C%20'10%25'%2C%20null)%3B%0D%0A%20%20var%20v%20%3D%20s.getPropertyValue%20('background-position')%3B%0D%0A%20%20w%20(typeof%20(v)%20%2B%20'%2C%20%26%23x22%3B'%20%2B%20v%20%2B%20'%26%23x22%3B')%3B%0D%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20value%20of%20the%0D%0A%3Ccode%3EgerPropertyPriority%20('color')%3C%2Fcode%3E%20method.%0D%0A;p=n;x=style-element>
- [CODE(CSS)@en[[[background-position]]: [[right]] 20[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20%20background-position%3A%20right%2020px%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20var%20s%20%3D%20%20sd()%2F%2FgetComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null)%3B%0D%0A%20%20%2F%2Fs.setProperty%20('-x-background-x-position'%2C%20'10%25'%2C%20null)%3B%0D%0A%20%20var%20v%20%3D%20s.getPropertyValue%20('background-position')%3B%0D%0A%20%20w%20(typeof%20(v)%20%2B%20'%2C%20%26%23x22%3B'%20%2B%20v%20%2B%20'%26%23x22%3B')%3B%0D%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20value%20of%20the%0D%0A%3Ccode%3EgerPropertyPriority%20('color')%3C%2Fcode%3E%20method.%0D%0A;p=n;x=style-element>
- [CODE(CSS)@en[[[background-position]]: [[center]] 20[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20%20background-position%3A%20center%2020px%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20var%20s%20%3D%20%20sd()%2F%2FgetComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null)%3B%0D%0A%20%20%2F%2Fs.setProperty%20('-x-background-x-position'%2C%20'10%25'%2C%20null)%3B%0D%0A%20%20var%20v%20%3D%20s.getPropertyValue%20('background-position')%3B%0D%0A%20%20w%20(typeof%20(v)%20%2B%20'%2C%20%26%23x22%3B'%20%2B%20v%20%2B%20'%26%23x22%3B')%3B%0D%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20value%20of%20the%0D%0A%3Ccode%3EgerPropertyPriority%20('color')%3C%2Fcode%3E%20method.%0D%0A;p=n;x=style-element>
- [CODE(CSS)@en[[[background-position]]: [[top]] 20[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20%20background-position%3A%20top%2020px%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20var%20s%20%3D%20%20sd()%2F%2FgetComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null)%3B%0D%0A%20%20%2F%2Fs.setProperty%20('-x-background-x-position'%2C%20'10%25'%2C%20null)%3B%0D%0A%20%20var%20v%20%3D%20s.getPropertyValue%20('background-position')%3B%0D%0A%20%20w%20(typeof%20(v)%20%2B%20'%2C%20%26%23x22%3B'%20%2B%20v%20%2B%20'%26%23x22%3B')%3B%0D%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20value%20of%20the%0D%0A%3Ccode%3EgerPropertyPriority%20('color')%3C%2Fcode%3E%20method.%0D%0A;p=n;x=style-element>
- [CODE(CSS)@en[[[background-position]]: [[bottom]] 20[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20%20background-position%3A%20bottom%2020px%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20var%20s%20%3D%20%20sd()%2F%2FgetComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null)%3B%0D%0A%20%20%2F%2Fs.setProperty%20('-x-background-x-position'%2C%20'10%25'%2C%20null)%3B%0D%0A%20%20var%20v%20%3D%20s.getPropertyValue%20('background-position')%3B%0D%0A%20%20w%20(typeof%20(v)%20%2B%20'%2C%20%26%23x22%3B'%20%2B%20v%20%2B%20'%26%23x22%3B')%3B%0D%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20value%20of%20the%0D%0A%3Ccode%3EgerPropertyPriority%20('color')%3C%2Fcode%3E%20method.%0D%0A;p=n;x=style-element>

([[名無しさん]])

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

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

[16] >>17 [[Chrome]] と [[Firefox]] のどちらも無視しました。 [TIME[2013-09-04T14:04:31.400Z]]

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

[19] >>18 [[Firefox]] は[[キーワード]]そのままですが [[Chrome]] は [CODE(CSS)@en[[[<percentage>]]]]
に変換して [[CSSOM]] に現れます。 [TIME[2013-09-04T14:17:44.700Z]]

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

[21] >>20 現在の [[Firefox]] では [CODE(CSS)@en[[[center]]]] になっています。 [[Chrome]] では
[CODE(CSS)[[[50%]]]] です。 [TIME[2013-09-04T14:18:37.900Z]]

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

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

([[名無しさん]])

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

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

[24] >>9 現在の [[Firefox]] と [[Chrome]] は必ず2つの値を出力するようです。 [TIME[2013-09-04T14:29:09.500Z]]

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

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

[13] [CITE[Bug 3935 – mozilla-native pseudo classes and properties should be marked as such '''['''SELECT''']''']]
([TIME[2010-07-04 21:17:45 +09:00]] 版)
<https://bugzilla.mozilla.org/show_bug.cgi?id=3935>

[14] [CITE[Bug 3935 – mozilla-native pseudo classes and properties should be marked as such '''['''SELECT''']''']]
([TIME[2010-07-04 21:17:45 +09:00]] 版)
<https://bugzilla.mozilla.org/show_bug.cgi?id=3935>

[15] [CITE@en[''''''[''''''css3-background'''''']'''''' background-position-x background-position-y]]
( ([[Florian Rivoal]] 著, [TIME[2012-02-15 23:40:28 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2012Feb/0618.html>

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

[25] [[Chrome]] では [CODE(CSS)@en[[[inherit]]]] など [[CSS-wide keyword]]
を指定して取得すると [CODE(CSS)@en[[[inherit]] [[inherit]]]] のような再度構文解析できない値になります。 [TIME[2013-09-07T10:34:08.000Z]]

[26] [CITE@en[Issue #9. Add note about -webkit-background-x/-y · whatwg/compat@bba2cb0]]
([TIME[2015-11-05 16:59:59 +09:00]] 版)
<https://github.com/whatwg/compat/commit/bba2cb0690bb46d8f944b82579fff505a4705d48>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)