- 2006-12-25 (月) 12:08
- archives
数ヶ月前に、習作として作っていたbackground-position のサンプルがあったのを思い出したので、ここで書いてみます。
background-position のサンプルページ
で、このサンプルをなんのために作ったのかというと、background-positionをパーセント指定したときに、その位置から背景画像が描画されるのではなく、background-positionを指定した要素のその位置と背景画像のその位置が同じ位置になるという、てんぽさんの記事に影響を受けたためだと思います。
サンプルの三つ目にある「background-position: 25% 75%;」の指定がわかりやすいです。ボックスの左から25%、上から75%の位置と、背景画像の左から25%、上から75%の位置が重なっていると思います（わかりやすいようにドットをつけました）。
間違っている解説サイトが多いのはてんぽさんの方でも挙げられていましたが、やはりわかりにくい部分は視覚的に確認するとマルですね。
- Newer: Wii専用デザイン
- Older: Nintendo Wii のブラウザを試してみた
Comments:4
- wu 06-12-26 (火) 0:50
-
うおっほ。
実際使うときには100%指定かキーワード指定だけだったから、あんまり意識することもなかったし、background-positionプロパティについて仕様書も見て無かったわ。 しぼう。 - miniturbo 06-12-26 (火) 13:14
-
パーセント指定を積極的に使う例ってあまりないですよね。だからこそ、いざ使うときにハマりやすかったりするわけなんですよね。
サンプル用のCSS書くより画像を作るほうが手間隙かかってるのは内緒です。
- katsuo 06-12-26 (火) 14:35
-
疑問に思ったことも考えたこともなかった…。勉強になりまする。
更新頻度と凝り具合も見習いたい。 - miniturbo 06-12-26 (火) 21:00
-
自分もてんぽさんの記事を読んでなるほどと思ったのです。でも昔の僕と違うのは、検証＆メモとしてサンプルを作ったかどうか。まぁ結局は作ったの自体忘れてたわけですが…。
肩の凝り具合なら負けませんよ！