- ベストアンサー
CSSの設定でわからない箇所があります。
- CSSの設定で、ドロップシャドウ効果を使いつつベタ塗りの背景画像と縦リピートするライン画像を使用する方法がわかりません。
- 現在の設定では、ドロップシャドウのラインがブラウザ画面を拡大すると切れてしまいます。
- 最下部までドロップシャドウの背景を伸ばして表示させる方法が知りたいです。
- wem00990
- お礼率0% (0/3)
- その他（プログラミング・開発）
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2さんの方法がJSを使わない方法では最善ではないかと思います。 上部に余白ができてしまうときは、html{}か*{}に margin:0;をpadding:0;を追加するとよさそうです。 *{ margin:0; padding:0; } html{ height:100%; } body{ background:url(img/back.gif); text-align:center; height:100%; min-height:100%; } #wrapper{ width:800px; margin:0 auto; background:url(img/shadow.png) repeat-y; text-align:left; min-height:100%; height:auto !important; height:100%; } 参考URL http://www.stylish-style.com/csstec/ultimate/height100.html
その他の回答 (2)
- nekomikekamo
- ベストアンサー率73% (71/97)
いくつかCSSを追加修正。 body,html{min-height:100%;height:100%;}←追加 body { background-image: url(img/back.gif); background-repeat: repeat; padding:0;←追加 margin:0;←追加 text-align:center;←追加 min-height:100%;←追加 } #wrapper { width: 800px; margin:0 auto;←marginまとめて指定 background-image: url(img/shadow.png); background-repeat: repeat-y; text-align:left;←追加 min-height:100%;←追加 height: auto !important;←追加 height: 100%;←追加 }
- kuzumiHK
- ベストアンサー率72% (132/183)
ボディの背景がベタで幅固定ということでしたら、 ラップの背景をやめて以下にしてみてはいかがでしょうか。 body { background-color: #f00; background-image: url(img/shadow.gif); background-repeat: repeat-y; background-position: 800px 0; } もしくは、画像をPhotoshopなどで合成するなど。
補足
ご迅速にご回答頂きまして、誠にありがとうございます。 『ベタ塗りの背景』とお伝えしましたが、正確には『細かいストライプ柄の塗り画像』なのです。 説明不足で申し訳ありません。 ですので、できれば、『ドット柄の塗り画像（back.gif）』をページ全体の背景に。 ドロップシャドウ効果のライン画像（shadouw.png）を背景エリアとの区切りになるように 本文エリアの両端につけてリピートしたいのです。 本文エリアは、横幅は固定で、中央配置。 高さは各ページで成り行きにしたいのですが、 ブラウザをどんなに拡大縮小してもドロップシャドウ効果のライン画像（shadouw.png）を ブラウザの末端まで付けたいのです。 もし何か方法があれば再度ご教授ください。 宜しくお願い致します。