背景を左右対称のグラデーションにしたいのですが？

[新着] Webテンプレートを仮オープンしました

0   名前： shino ： 2006/11/16（木） 14:59  ID:hluNH6xU
【何をしたいのか】
ＨＴＭＬで背景のグラデーションをよくみかけます。
とてもきれいで私も使ってみたいと思うのですが、
左右対称のグラデーションって実現可能なのでしょうか？
画面サイズが変更されても常に左右のバランスが保たれる
グラデーションを作りたいのですが
片方向のグラデーションは、JAVA やスタイルシートで実現できたのですが・・・・

【何をしてみたのか】
色々なサイトを訪ねてみたのですが横長のＧＩＦを使ってのグラデーションは
よくみかけるのですが画面のサイズに追随しませんでした。

どなたか方法をご存知、又お取り扱いのサイトをご存知でしたら教えていただけませんか？

【備考】
1   名前： ラブーフ ： 2006/11/16（木） 14:59  ID:mGMjLPPf
こんばんは。左右対称といっても、グラデーションの方向などもあり、shinoさんが想定しているものが
どんなものかは、この文面からは分かりにくいです。

＞片方向のグラデーションは、JAVA やスタイルシートで実現できたのですが・・・・

「JAVAとJavaScriptは、別物だから区別しましょう」というのは頻出なので、検索していただくとして、
その具体的なソース(やったこと)を示してもらえないでしょうか。その方が回答が付きやすいですよ。
2   名前： shino ： 2006/11/16（木） 14:59  ID:AhHePl8I
おはようございます。
ラブーフさん、早速のレスありがとうございます。

BODY タグにスタイルシートで

<BODY bgcolor="#ffffff" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1, startColorStr=#FF009999, endColorStr=#FF0033CC)">

と記載すると HTML の背景が左右にグラデーションします、ただしこの方法では
左（startColorStr）から右（endColorStr）の画面全体にグラデーションは展開され
左右対称にはなりません。又

<BODY BACKGROUND="LineBlue1024.gif" TEXT="#FFFFFF" LINK="#000000" ALINK="#000000" VLINK="#000000">

のように記載すると（ LineBlue1024.gif はサイズ 1024 x 10 ピクセルの中心から
左右にグラデーションしている画像です。）

一応期待した結果にはなりますが、この方法ですと 表示されてるWindowのサイズを変更したときに
中心がずれてしまいます。常に中心から展開されるグラデーションを実現したいのですが？
3   名前： hiro ： 2006/11/16（木） 14:59  ID:cweaY6ae
水を差すようなことを言って申し訳ないのですが、
このようなIEでしか実現されないようなものを苦労して
貼ったとしても自己満足ではないでしょうか。
画像の方がよいと思います
4   名前： 通りすがり ： 2006/11/16（木） 14:59  ID:9IuG66CT
> 一応期待した結果にはなりますが、この方法ですと 表示されてるWindowのサイズを変更したときに
中心がずれてしまいます。常に中心から展開されるグラデーションを実現したいのですが？

スタイルシートで背景画像をcenter配置にすればいいのではないですか？
5   名前： shino ： 2006/11/16（木） 14:59  ID:AhHePl8I
みなさま、こんにちは

hiro さん、ありがとうございます。そうなんですか、グラデーションは
ＩＥのみでしか見れないんでしたか。知りませんでした。

通りすがりさん、ありがとうございました。

body { background: #87ceeb url(LineBlue1024.gif) repeat-y fixed center center ; }

と試したところ、うまくいきました。画像サイズ（1024 px）より大きくされても
いいように背景色を両サイドのカラーにしたところ希望する対称グラデーションが実現できました。

みなさま、本当にありがとうございました。
一覧へ戻る