CSSで背景画像を真ん中だけに表示

質問

背景画像を画面最上部の真ん中600pxだけに表示したい場合、
外部CSSはどのように表記すれば良いのでしょうか？

現在

background: url("img/●●.gif") repeat-x top;
background-position:0px 0px;

と表示してますが、これだと最上部右から左まで画面いっぱいに表示されます。
これをテーブルを使わずに真ん中600pxだけに表示する方法はありませんか？
※テーブルがダメな理由は、margin:0px;で指定しても、画面最上部1pxだけ空いてしまうからです。
空かない方法があればそれでもかまいません。

アドバイスよろしくお願い致します。

回答No.3

steel_gray · ベストアンサー

画像の大きさは幅600pxなんでしょうか？
Yesなら
background: url("img/●●.gif") no-repeat top center;

Noなら
CSSの背景の繰り返しは
・繰り返しなし
・縦方向にだけ繰り返し
・横方向にだけ繰り返し
の３択ですので、幅を指定してその範囲内で繰り返し、というのはできません。
ブロックの幅を指定するしかありません。
例
<div style:width:600px;background:～

補足

回答ありがとうございます。
なるほど、繰り返しで指定は出来ないんですね。。。
そうするとおっしゃる方法しかないわけか・・。
悩みます。

回答No.4

fake-tang

も1個あった。
table じゃなく、 div を使うとか。

てすと。<div style="background:#ff0000;width:600px;height:240px;position:absolute;top:-1px; left:-1px;z-index:-1 " ></div>

(動作確認：IE6)

補足

度々の回答ありがとうございます。

この方法も試してみます。
ありがとうございます。

回答No.2

quququ

背景画像を600pxに作れるなら

background-repeat : repeat-y;
background-attachment : fixed;
background-position : 50% 0%;
text-align : center;

私はこうしてるので参考までに。

補足

回答ありがとうございます。
600pxで作れますが、今は15pxですのでそのまま使えるに越した事はありません。
出来ませんかね？

回答No.1

fake-tang

●●.gif を height ｘ 600px で作って、左上に固定すれば?

補足

回答ありがとうございます。

例えば縦50px・横600pxの画像を左上に固定するという意味ですか？
そうすると、左側から600pxになってしまいますよね？
センタリング(?)したいんです。

その他コンテンツは中寄せで制作してあり、その幅が600pxとします。
それでその幅に合わせて画面サイズを変えても良いように、センターで600px表示させたいんです。