background-position指定位置（数値）の記述

0   名前： みるず ： 2007/02/20（火） 09:26  ID:rsGydZ4/ sub-.G
はじめまして。

横並びにした各リスト（不揃い幅）に背景イメージ（1枚もの）を設置しています。
その際、各リストの背景ポジションの位置を数値で指定しているのですが、マイナス数値で表記しないと背景が表示されません。

サンプル

<ul>
<li class="aaa"><a href="********">あああ</a></li>
<li class="iii"><a href="********">いいい</a></li>
<li class="uuu"><a href="********">ううう</a></li>
</ul>

--------------------------

ul {
width: 500px;
height: 100px;
}

li {
height: 100px;
float: left;
}

a {
text-indent: -9999px;　（テキストは跳ばしています）
display: block;
height: 100px;
background: url(*******) no-repeat;
}

.aaa {
width: 150px;
background-position: 0px 0px;
}

.iii {
width: 120px;
background-position: 150px 0px;
}

.uuu {
width: 230px;
background-position: 270px 0px;
}

っという感じで記述するものだと思っているのですが、
実際この様に書くと背景が表示されず、


■■■　略　■■■

.aaa {
width: 150px;
background-position: 0px 0px;
}

.iii {
width: 120px;
background-position: -150px 0px;
}

.uuu {
width: 230px;
background-position: -270px 0px;
}

と、数値にマイナスを表記すると問題なく表示されます。

以前に、ポジションの数値はプラス位置であってもCSSの表記はマイナスをつけて数値を書くんだと言われたことがあったため
それを思い出しマイナスをいれてみると、確かに正常値で表示されるのですが、その真意は理解できていません。

素直に疑問を感じているのですが、背景画像のｘ軸ｙ軸のゼロ地点から始まり、右方向（プラス位置）に表示位置を移動させるのに、
何故マイナス値を入れないと正しく表示されないのでしょうか・・・？

そもそもの観点が間違ってるという事も含め、どなたか解説いただけるか参考ページ等を教えていただければ嬉しいです。
よろしくお願いいたします。
1   名前： K+S ： 2007/02/20（火） 09:26  ID:nROqylMa sub-YS
提示されたソースで症状を実現させようとしましたができませんでした。
検証可能な状態にしていただかない限り回答が得られる可能性は低いと思われます。

ところで、background-position プロパティは background-image プロパティに対する指定ですが、
background-position プロパティが適用される要素に background-image プロパティが指定されていないように見受けられます。
2   名前： みるず ： 2007/02/20（火） 09:26  ID:rsGydZ4/ sub-.G
k+sさま

レスありがとうございます。

上のソースでは、おっしゃるとおり質問している状態にすらなりませんね・・。
”なるもの”と思って、未確認でいました。。

もう一度ここのコメントで、実作業してるものと比較してサンプルのソースをあげたいと思います。

が、時間が遅いので明日に改めさせていただきます。。
k+sさん含めここを見ていただいた方、申し訳ありません。

再度書き込むまで、、、ほんの少し失礼しますm(_ _)m
3   名前： みるず ： 2007/02/20（火） 09:26  ID:rsGydZ4/ sub-.G
ちなみに・・・

background-image なのですが、ａタグ自体の背景で指定することで
各クラスにはposition指定のみしかしていないのですが、これは使用的におかしいでしょうか？

上のソースで同じようにならないのでなんとも言えませんが、
いくつか実作業でａタグにimgeを指定後、各クラスではポジションのみを指定するという書き方をしてきております。

特に表示上問題もなかったのですが、文法的に誤りであればこの辺ももう一度勉強しなおさなければと思いました。
とりあえずこれも含め、確認してみます。
4   名前： 匿名 ： 2007/02/20（火） 09:26  ID:rEkc4Z1y sub-kJ
>>0
> ポジションの数値はプラス位置であってもCSSの表記はマイナスをつけて数値を書くんだと言われた

background-position はボックスの左上を (0%, 0%)、右下を (100%, 100%) とする。負数を使って隠しても良いが、普通は正数だ。


>>3
> ａタグにimgeを指定後、各クラスではポジションのみを指定するという書き方

通常、background-position は継承しない。もし a 要素（≠タグ）に { background-position: inherit; } を指定しているならば継承され、親要素（li）と同じ計算値を持つ。


と、ここまで書いて思ったが、もし >>0 のソースに加え a { background-position: inherit; } が指定されているのだとしたら、各 a 要素が配置される位置から数えて、それぞれ 0px、150px、270px 右側に画像が配置される。だから、-0px、-150px、-270px をもう一度指定すれば、それぞれ 0px の位置に戻ってくる、ということではないのか。

要するに、各 li 要素に background-position を指定しなければ良い。と言うことは、a { background-position: inherit; } を指定する必要もない。

余計な記述を増やして苦労している、と予想。
5   名前： 匿名 ： 2007/02/20（火） 09:26  ID:rEkc4Z1y sub-kJ
あーごめん。

>>0
> 背景イメージ（1枚もの）を設置

をすっかり見落としていた。もし一枚絵の

・左端から 150px 分を li.aaa の背景に、
・そこから 120px 分を li.iii の背景に、
・それ以降を li.uuu の背景に、

それぞれ使うのであれば、一枚絵をその分だけ左に移動させねばならない。つまり、各 background-position(-x) が -0px、-150px、-270px となるわけで、>>0 の指定方法は正しい。

ソースがないと確実なことは言えないが、>>4 で変な疑いをかけてしまったことをお詫びする。
6   名前： みるず ： 2007/02/20（火） 09:26  ID:rsGydZ4/ sub-.G
おはようごじざいます。
ソースをかきなおすまでもなく、>>5さんのレスで解決しました。

>一枚絵をその分だけ左に移動

させてると解釈すればよいのですね。

みなさん、ありがとうございました。

一覧へ戻る