widthが可変のブロック要素で、常に中央から右部分だけに、背景画像を

widthが可変のブロック要素で、常に中央から右部分だけに、背景画像をrepeat-xしたいのですが、どうすればよいでしょうか？

background-positionを使えば何とかできるかと思ったのですが、うまくいきません。

「widthが可変」
「常に中央から右部分」
「背景画像をrepeat-x」
この組み合わせ方をcssで実現できる方、もしいれば教えてください。

No.2 ベストアンサー 回答者： metametamu 回答日時： 2010/09/25 13:55

<style type="text/css">

#WRAPPER{
padding-left:50%;
background:#0000cd;
}
#WRAPPER div{
background:yellow;
}
#WRAPPER div div{
margin-left:-100%;
background:none;
}
</style>
<div id="WRAPPER">
<div>
<div>内容</div>
</div>
</div>

この回答へのお礼

ありがとうございました。
それにしても、このCSS凄いですね。
これからいろんな場面で使ってみたいと思います！

お礼日時：2010/09/25 20:16

No.3 回答者： yuu_x 回答日時： 2010/09/25 18:16

> 2

それでいこう。

なんてこった。
position と repeat を同時に指定すると、position で指定した場所を基点にして repeat
結局全体に表示される。

CSS 3 でもその辺の変更はないみたいだね。

この回答へのお礼

＞position と repeat を同時に指定すると、position で指定した場所を基点にして repeat
結局全体に表示される。
検証ありがとうございます。これなんでかな？ と自分も思ってたんですけど、基点から右だけではなく全体に repeat されるってことなんですね。ああ、なるほど。ようやく、なんでこんな表示になるかの意味が分かりました。

お礼日時：2010/09/25 20:20

No.1 回答者： yuu_x 回答日時： 2010/09/25 11:59

xxx { background : transparent url(***) repeat-x scroll 50% 0; }

この回答への補足

このやり方を実際に試してみると、50%が有効とならず、ただのrepeat-xだけになってしまいます。Firefox3.6.10とIE8で試しました。それとも何かこちらの設定が間違っているのでしょうか？

どなたか、xxx { background : transparent url(***) repeat-x scroll 50% 0; }で、
「widthが可変」
「常に中央から右部分」
「背景画像をrepeat-x」
となるか、試していただけないでしょうか？

補足日時：2010/09/25 12:09

この回答へのお礼

すいません。前提条件説明追加させてください。
上記＋左半分は、「background-color:#0000CD;」としたいです。

お礼日時：2010/09/25 12:14