HPをブラウザで見た時に画面の背景に色を付ける方法

質問

WindowsVistaでGoliveCSを使ってHPを作っています。
出来たHPをブラウザで見た時に画面の背景（作ったファイル以外の部分）に色を付ける方法を教えて頂けないでしょうか？
出来れば上から下に薄くなっていくグラデーションで色を付けたいのですが…
どうぞよろしくお願いします。

回答No.3

abril

もう自己解決されている様ですので、以下は今後の何かの参考にでもなれば。
縦方向のグラデーションを画面全体の背景に敷く（bodyの背景画像として設定）場合、幅は適当×縦は（当然）グラデの最初の色から最後の色まで、というパターンで画像を作成します。幅が適当で良いのは、X軸方向に”だけ”リピートしてレンダリングする（Y軸方向にリピートさせては”いけない”理由は、ANo.2の方が懸念されている通りコンテンツ量が多い場合「途中でグラデーションが元に戻って繰り返される」可能性があるからです）為、いくつであっても結果は同じになるからです。質問者様がサンプルで上げられたMSNのサイトでは、W1px×H1024pxというサイズですので横幅は最小値にしていますが、別に10pxでも50pxでも100pxぐらいでもかまいません。逆にあまり小さい画像を広範囲にレンダリングする方が負担がかかるという説もありますので、個人的には50～100pxぐらいでもいいと思っています。
仮にコンテンツが長くて、縦方向のグラデのパターンが終わった後も続いている場合はどうするのか、という事については心配無用です。グラデのパターンには必ず終着点がありますよね？例えばMSNのサイトであれば、青（#3c7faf）から開始してごく薄いグレー（#ededed）で終わる、というパターンです。であれば、その終着点の色をbodyの背景色として、背景画像と併せて設定しておけばいいだけです。
body {
background: url(hoge.gif) repeat-x #ededed;
}
という感じで。これで何も面倒な事はありません。

お礼

ご親切にご回答ありがとうございます。
今後の勉強に物凄くさせて頂きます。
勉強不足でまだまだ？？？　な箇所がありますが
俄然やる気が沸いてきました☆
ありがとうございます。
そしてまたどうかよろしくお願い致します。

回答No.2

fujillin

一番簡単なのは、縦長（縦1024、幅2ピクセル程度）のグラデーション画像を用意して、bodyのバックグラウンドに指定すれば、全体に縦グラデーションがかけられます。
ただし、この場合はHPのコンテンツの長さ（縦方向の長さ）が長いと、途中でグラデーションが元に戻って繰り返されることになります。
それを避けるには、もとの画像を充分長くしておくという方法もありますが、限界はありますね。

他の方法としては、同様のグラデーション画像をCSSなどを利用して、背景としてフローティングさせて表示しておくというのもあります。（画面と一緒に移動する）
この場合は、コンテンツが長くてもスクロールするのはコンテンツだけなので、背景の切り替えしが表れることはありません。
ただし、実装するのは少々面倒です。

お礼

ご回答頂きましてありがとうございます。
今、気付いて慌てて読ませて頂いたところです。
前半、なるほど！　後半は私には？という所があるのですが
じっくり勉強させて頂きます。
ありがとうございました。

回答No.1

adobe_san

GoliveCSでグラデーションですよね。
なら左右・天地の大きさをピクセルで決めて、画像編集ソフトでRGBモードの72dpiで作成し、全面画像として配置する。
これしか方法ありません。
同一色・模様のパターンならもっと簡単に作れます。
今回は「グラデーション」がネックになります。

では！

お礼

adobe_san様　
ありがとうございました。
頂いた回答をヒントにもう一度調べたりしながら
試行錯誤して何とかできるようになりました。
ありがとうございました。

補足

adobe_san様　早速のお返事をありがとうございます。

＞全面画像として配置する。
と書いて頂いていますが、これは何かそういうコマンドがあるのでしょうか？　的外れな質問だったらごめんなさい。

それと、MSNのトップページですが　http://jp.msn.com/
周囲に青い部分があると思います。
あのようにしたいと考えています。
あの周囲の青い部分も含めて1つのhtmlファイルなのでしょうか？
だとすると、大きな画面で見る人がいらっしゃる事も仮定して
かなり余分に大きくしておく必要があるのでしょうか？

随分、マヌケな質問をしてしまっている思います。
どうぞよろしくお願い致します。