Greensleeves v2.0 / Tag: background-position
Notes about things I'm interested in.
Tag: background-position が付けられているエントリーが 1 件見つかりました。
background-position プロパティって、% 指定と px 指定のときで画像配置の挙動が微妙に違うんですね。
今の一言で、自称 CSS 使いのくせに仕様書をきっちり読んでないのがバレた気がしますが、気にしない。忘れないように一応メモっておきます。
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
CSS2 Specification の項目には上記のように記載されています。簡単に言うと、たとえば background-position: 14% 84%; と宣言した場合、宣言した要素の '14% 84%' のポイントに 指定した画像の '14% 84%' のポイントが来るように配置するということになります。簡単に図で表してみると下図のような感じになります。
位置を '50% 50%' とかにしてみると確かに配置位置はど真ん中になるので、それでピンと来そうな気もしますが今まで全く気がつきませんでした。
リファレンスサイトを見て回ってみても説明が間違っていたり、（誤解しそうな内容なのに）注意書きが無かったり、とかだったんで間違って覚えている人が案外多いかもしれません。え？僕だけ？