background-postionについて

背景画像を右からxx%に並べる場合、CSSで単純には並べられないような気がするので、あーでもないこーでもないと考えてたらやり方わかりました。微妙に頭使いましたが、理解してみると単純明快で、「実は常識？」とか鬱になってみたり。CSSのコードよりも、画像の作り方がポイントだったので、なかなか思いつかなかったです。

背景画像を右から30%の位置で縦に並べてみたサンプル

background-positionで%指定をした時の挙動をきちんと知っていさえいれば、何のことは無いような気がする。background-positionを

div#foo {
  background-image:url("bar.png");
  background-position:60% 25%;
}

というように記述すると、id="foo"のdivブロックの左から60%上から25%の点と、bar.pngの左から60%上から25%の点を合わせるという事になります。すげーわかりにくいですね、これ。なので、適当に画像自体に手を加えてやり、マージンを作ってやると、思い通りに配置できると思います。

んー。もっと簡単な方法ありそうな気がする。