コンテンツにあわせて伸縮する背景 CSS

質問

http://www.fisco.co.jp/index.html

上記のサイトのように、ヘッダーのリンクボタンの横の左右に伸びるラインと、
フッターの左右に伸びるラインのような背景にしたいと思っています。
その時上記サイトは背景が白ですが、私は上から下にかけてグラデーションにしたいと考えています。
最初縦長で上から下のグラデーション画像を用意し、X方向にリピートしてみたのですが、
コンテンツの長さによっては文字や画像と重なってしまったり、
またはものすごく余白があいてしまったりしています。
CSSは以下のように設定したのですがうまくいきません。

body { background:url(../img/bg.jpg) repeat-x center top;
line-height:1.4;
color:#333;
font-family:Arial, sans-serif;
font-size:0.7em;
margin: 0;
padding: 0;
height:100%;
}

このような場合、コンテンツの長さがページごとに変わっても、
上下にコンテンツを挟む形でラインが表示される方法を教えてください。
説明がうまくできず申し訳ないのですが、よろしくお願いいたします。

回答No.3

tenderfeel · ベストアンサー

>お手数なのですが、「持ち帰り用」からファイルをダウンロードして
>「bg,gif」をご確認いただけますか？
>私は↑のサイトのように横のグラデーションではなく縦にしたいので、
>repeat-yではなくrepeat-xにしてみたのですができません。

なんか、いまいち掴めないんですが・・・
縦っていうのは上が濃くて下に行くほど薄くなるっていう意味ですか？
もしそうならば、このサンプルと同じ画像ではどれだけrepeatしても出来ません。

縦方向のグラデーションだけの画像を作って、bodyとかでrepeat-x
[：：：：HEADER：：：：：]
　　　[CONTENT]
[：：：：FOOTER：：：：：]
↑Contentを中央に配置して、背景色白＋左右に枠線つけてみたらどうでしょう

お礼

お礼が遅くなり申し訳ありません。
説明が足りなかったですね。。。

参考サイトの背景は内側から外側に薄くなるグラデーションで、横長の画像を縦にリピートしていたので、
私はその反対に上から下にかけて薄くなるグラデーションで、縦長の画像を横にリピートしてみたのです。
が、うまくいきませんでした。。。

tenderfeelさんのアドバイスどおり

>縦方向のグラデーションだけの画像を作って、bodyとかでrepeat-x
>[：：：：HEADER：：：：：]
>　　　[CONTENT]
>[：：：：FOOTER：：：：：]
>↑Contentを中央に配置して、背景色白＋左右に枠線つけてみたらどうでしょう

こちらを試してみました。
上部に少々の隙間がなぜかできてしまい、今はその対処方法を探しているのですが、
グラデーションを背景にするところまで行くことができました。
本当にどうもありがとうございました。
あと少し、理想の背景ができるようにがんばります(^_^)

回答No.2

tenderfeel

>教えていただいたようにHEADER・FOOTERとしてラインの設定はできたのですが、何か文字を入れないと表示してくれません。
>対処としてラインと同色の「・」を入れてようやく表示されたのですが、検索しても正式な記述方法が分かりません

具体的なソースとかがないんで当てずっぽうになるんですが・・・。
前に挙げた例は参考で貼られたサイトと同じように、ヘッダとフッタにロゴやメニューなんかが入るのを想定しましたが
divタグはただの入れ物なので、中身が空でheight指定してないのなら
高さが0になるため背景指定しても表示はされません。

ただ横いっぱいに背景画像を繰り返し表示したいというのなら他にも方法があるのですが
とりあえず背景画像と同じ高さに指定してみたらどうでしょう

>BODYに設定してX方向にリピートとしたのですがそのままの画像が表示れてしまいます。

どういう画像なのかがわからないのですが、
XとY間違えてるだけ・・・とか無いですか？

お礼

なんと！できました！！

#line {background:url(../img/top-foot-line.gif) repeat-x;
margin: 0;
padding: 0;
color:#000000;
}

さきほどまでこのようなソースにしていたところ
height: 10px;
を加えることで表示されました。
ありがとうございます！

グラデーション背景はこちらのサイトを参考に↓
http://css-happylife.com/log/css-template/000028.shtml
作ってみたものになります。
お手数なのですが、「持ち帰り用」からファイルをダウンロードして
「bg,gif」をご確認いただけますか？

私は↑のサイトのように横のグラデーションではなく縦にしたいので、
repeat-yではなくrepeat-xにしてみたのですができません。

＞XとY間違えてるだけ・・・とか無いですか？
yにしてみましたが、間違いではないようです。

よろしくお願いします。

回答No.1

tenderfeel

このサイトはテーブルなんで、３列にしたテーブルの左右に横に伸びる背景を入れてるだけです。

XHTMLで同じ事をしたいなら単純に
[：：：：HEADER：：：：：]
　　 [CONTENT]
[：：：：FOOTER：：：：：]
みたいに３段にして
HEADERとFOOTERにrepeat-xで横に伸ばす背景つければ同じように出来ると思います。
グラデーションはbodyみたいな大外の要素か
contentの背景につければ良いのではないかと。

お礼

tenderfeelさん、ありがとうございます！
できました！
こんなに簡単なことなのに恥ずかしいです(>_<)

ただまだちょっと分からないことがあります…
教えていただいたようにHEADER・FOOTERとしてラインの設定はできたのですが、何か文字を入れないと表示してくれません。
対処としてラインと同色の「・」を入れてようやく表示されたのですが、検索しても正式な記述方法が分かりません。

またグラデーション画像もラインを取ったものを用意し
（幅20pxのグラデーションを左右に配置し、真ん中はコンテンツ幅の920pxにしてあります）、
BODYに設定してX方向にリピートとしたのですがそのままの画像が表示れてしまいます。
どうしてなんでしょうか？？？

またまた質問攻めですが、どうぞよろしくお願いします m(__)m