WEBサイトの壁紙の設定方法

質問

表題の件で質問です。

ホームページの背景画像を設定するとき、最近良く上の方は薄い色で
下の方にいくと濃い色になるようなグラデーションを指定しているサイトが
多い気がするのですが、ああいう背景はどのようにして指定しているのでしょうか？

例えば白黒グラデーションで、上の方を#000で下を#fffになるような
グラデーション画像を作り、縦方向のリピートをさせずに背景を#fffで
指定すれば上が黒で下に行くとだんだん白くなるようなグラデーションに
なると思うのですが、逆の場合ってどのようにしてつくるのでしょうか？

例えばマイクロソフトのホームページがそのような感じです。
http://www.microsoft.com/ja/jp/default.aspx

こういった感じの背景にしたいとき、どのような方法でやればよいでしょうか？

ご存知の方がいらっしゃいましたら是非ご教示ください。
よろしくお願い致します。

回答No.2

grumpy_the_dwarf · ベストアンサー

ソースを見れば一目瞭然です。

bodyの背景色はrgb(236,245,251)、「おすすめ情報」って書いてあ
る高さあたりまではこの単色が見えています。背景画像は、
http://i3.microsoft.com/ja/shared/templates/master/cspMscomHomePageBase/Stage_BG_btm.png
をcenter bottomで配置してrepeat-xしていますね。上部は背景色に
近いあたりでじわ～っとグラデーションしてて、下部で急速に濃く
しています。ページ上部の単色からの移行がスムーズですね。

継ぎ目を感じさせない、グラデーションカーブの妙ってヤツがキモ
で、配置はbackground-positionでbottomって言えばいいわけ。ちな
みにbackground-position-yなんて属性はCSS2.1には存在しません。
MSのサイトでも使われていないIE独自の方言でしょう。

お礼

参考になりました。
ありがとうございました。

回答No.1

Seravy

背景画像の位置は任意で設定できます。
background-position-y: 100%;
とすれば、背景画像はページ下部に表示されます。

お礼

参考になりました。
ありがとうございました。