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

質問

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

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

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

回答No.2

metametamu · ベストアンサー

<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凄いですね。
これからいろんな場面で使ってみたいと思います！

回答No.3

yuu_x

> 2
それでいこう。

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

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

お礼

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

回答No.1

yuu_x

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

お礼

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

補足

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

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