中央の画像を固定して、両端を別々の画像を10リピートしたい。

0   名前： HHKiz ： 2006/12/18（月） 13:07  ID:UiMU4xEU
こんにちわ。
CSSを使って
1   名前： HHkiz ： 2006/12/18（月） 13:07  ID:UiMU4xEU
書きかけのままアップしてしまいました。ごめんなさい。

CSSを使って中央に700pxの画像を表示、その左右を別々の画像でリピートして100%表示させたいと思っています。

イメージは波形になっているヘッダーで両端は高さが違うまま直線でブラウザの両端を埋めています。

|-----------------------------100%----------------------------|
|..................|.......................|..................|
|--可変-bg-imageA--|---固定-imageB(700px)--|--可変-bg-imageC--|
|....(repeat-x)....|.......................|....(repeat-x)....|
|------------------|-----------------------|------------------|


このようなhtmlをcssで実現するにはどのような方法で実現できるのでしょうか？
検索して調べてみたのですが、どれも3段組みで両端の幅を固定するものか、左右の画像を変更できないものしか見つけることができませんでした。
お知恵をお貸しいただけると助かります。よろしくお願いいたします。

2   名前： くいん ： 2006/12/18（月） 13:07  ID:rbRHv8MX
> イメージは波形になっているヘッダーで両端は高さが違うまま直線でブラウザの両端を埋めています。

いまいちこの部分がよく理解できないのですが…

> CSSを使って中央に700pxの画像を表示、その左右を別々の画像でリピートして100%表示させたいと思っています。

↑この部分のみで考えてみました。


<body style="text-align:center; margin:0px; padding:0px;">


<div style="margin:0px; width:700px; height:100px; background-color:#444; position: absolute; top: 0px; left: 0px; z-index: 0;"></div>
<div style="margin:0px auto; width:700px; height:100px; background-color:#aaa; position: relative; z-index: 1;"></div>
<div style="margin:0px; width:700px; height:100px; background-color:#888; position: absolute; top: 0px; right: 0px; z-index: 0;"></div>

</body>


↑ではbackground-colorでボックスの位置などを確認していますが、
その部分を背景画像の指定にすりかえれば良いかなーと思いますがどうでしょうか。
各スタイルシートの記述の意味や数字の調整などはこのサイト様を見ればいずれも載っているので色々試行錯誤してみてくださいな。
一覧へ戻る