- ベストアンサー
css：背景の縦長グラデーション画像がブラウザの高さによって伸び縮み？
http://www.cyberagent.co.jp/index.html このサイトのように、グラデーションのかかった背景画像を使用する場合についてお願いします。 例えばこのサイトだと、「画像がブラウザの高さに合わせて縦に伸びている」と…見えるのですが、実際はどうなっているのでしょうか？ 自分で、グラデーション画像を作って background: url(back.jpg) repeat-x （もしくはno-repeat）のように指定しても、 元画像back.jpgの高さにしかならず、フッターあたりは空いてしまって白地になるのですが。。 （画像の高さが600pxで、ブラウザが800pxだったら、下に200px空いてしまうということ） 何か指定すべきプロパティなどあれば教えてください！
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
#2です。 横幅700px、縦1000pxのテーブルレイアウトで簡単に作ってみましたら（非常に手抜きですが） なんとか表示されました。2つの画像を使っているところがポイントみたいです。 CSS部分 *{margin:0;padding:0;} body{ margin:0; padding:0; text-align:center; background : url(2000px×1pxの画像) repeat-y center top; } div#my_body{ background : url(グラデーションの画像) no-repeat center top; } <body> <div id="my_body"> <table border="0"> <tr> <td width="700" height="1000"></td> </tr> </table> </div> </body>
その他の回答 (2)
参考にあげられているサイトのグラデーション背景は「2000px×750px」で作成されており CSSの表記は「background:url(画像ファイル) top center no-repeat;」となっているようです。 CSS表記例として *{margin:0;padding:0;} div#my_body{ background:url(画像ファイル) top center no-repeat; } HTML表記例として <body> <div id="my_body"> ・ ・ ・ ・ </div> </body> ではどうでしょうか。
お礼
ありがとうございます 質問の前に、これ試してみたのですが、うまくいきません。。 ブラウザの高さを900pxくらいで見ると、自分でやると、途切れます。このサイトだと、途切れない。。#1さんに教えていただいた、background-colorの設定が、どこかに隠れているかも？と探しています。引き続きお願いします！！
- outbrave
- ベストアンサー率60% (231/380)
background-color を、背景画像の一番下の色に合わせます。
お礼
！なるほどーー その観点で探した所、他サイトで、そのようにしているものを見つけました！！ ただ冒頭のサイトにおいては、transparentになってるんですよ。。 cssも大体見てみましたが、色指定を見つけられませんでした。 なんだかとても気になります。でも有り難うございました！！
お礼
うわあ！ほんとですね！！ 2000px×1pxの画像 に気付いていませんでした（オハズカシイ…） よく見ると、ちょっとムラになってますよね、冒頭のサイトの下部 たいへん感謝です #1さんの案と両方、いけそうな気がします！勉強になりました！！