画像をスライスしてボックスごと表示する場合について

質問

画像スライスをＣＳＳで組み合わせたものをページの中央に表示する場合は、以下のタグで全体を囲みますよね。
div#imgbox{
width:1200px;
height:200px;
position:relative;
margin:0px auto;
}

このときに背景色を１色ではなく、
黒色ボックスの背景色は、ブラウザの端っこまで黒色
赤色ボックスの背景色は、ブラウザの端っこまで赤色
のようにしたいのです。

黒色部分を
div#imgbox{
width:100%;
height:200px;
position:relative;
margin:0px auto;
background:#000000;
}

と色別に指定したら、今度は真ん中に寄らなくなってしまいました。
何か方法はあるのでしょうか？やはりテーブルなどで囲むしかないの
でしょうか・・・。

回答No.3

noname#83877

スペースはおそらく

html,body {
margin:0;
padding:0;
}

で対処できます。
div#imgboxに背景画像をしても表示されないのはちょっとよくわからないですね。

お礼

metametamuさんへ
ありがとうございます。スペースに関しては解決
出来そうです。
まだ、IEでしか確認できてませんが・・・。

回答No.2

noname#83877

多分リンク先のサイトはほとんど画像なので、一番下の文字の部分までの画像を用意し、
background:url(image.jpg) no-repeat center 0 blue;
のような感じの指定をbodyに指定すれば再現できると思います。

コンテンツによるのですが、分割したボックスの中が文字ならそれぞれの色ごとにdivで囲って背景色なり画像なりを指定する方が良いと思います。
もしもほとんど画像だけなら前述のような指定をfumi69さんの場合にはbody直下のdivにでも指定し(divにはheightを指定して高さを確保)、その上でdivに指定した背景画像と同じ間隔で縦方向に色分けされた長細い画像を用意し、bodyにrepeat-xで指定します。
こうすると水平方向に分割された背景画像の上に、また別の画像が重なるので1枚の画像に見えるはずです。

お礼

回答への補足は１回だけなので、こちらに書かせてもらいます。
ボックスごとに画像を並べたままですと、ブラウザの左側に寄って
ますよね？
そのたくさん画像が並んだボックスを
div#imgbox{
width:1200px;
height:200px;
position:relative;
margin:0px auto;
}
このdivで囲むと、センターに行きます。しかし、トップ部分にブラウザとの間に、なぜか隙間が出来てしまいます。
多分、そのことによって、縦方向に色分けした背景画像と合わなくなるような気がします。

ボックス全体をdivで囲んだ場合、隙間が出来てしまうのはしかたないことなのでしょうか？
何か良い解決方法はありますか？

補足

ボックスの中身はほとんど画像です。
分割された画像を並べています。
試しに、body全体の背景を縦方向に色分けされた画像を置きました。
ボックスに表示されている画像と色の位置がずれてしまいます。

今度は、こちらの部分に背景画像を指定したところ、
なぜか背景画像が表示されません。
div#imgbox{
width:1200px;
height:200px;
position:relative;
margin:0px auto;
}

回答No.1

noname#83877

ちょっとどういったものか想像がつきにくいですが、幅がpx指定で固定の場合は背景画像を縦方向にリピートで指定すれば良いのではないでしょうか。
2つめのソースはwidth:100%;と指定されているので、表示範囲がブラウザの画面全体にまで広がってしまうため中央寄せはできません。
widthをpxで指定するようにしてみてください。

div#imgbox{
width:1200px;
height:200px;
position:relative;
margin:0px auto;
background:url(image.gif) repeat-y center 0;
}

お礼

画像の色が黒・赤・グレーなどの順番になっています。
そのとおりに背景色もしたいのです。
そのため、背景は縦方向に繰り返すと、モニターサイズが1280×1024の場合は、また黒色が表示されてしまいます。
横だけ繰り返し表示にすればよいのでしょうか？

補足

補足情報を間違って、お礼の部分に書いてしまいました。

こちらのサイトは、バックが青色・白色の順番に
なってますよね。
http://www.stanley-no-majo.com/index.html

このような感じで、黒色・赤色・黒色・グレー黒と
背景色を表示したいのです。