こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSの設定でわからない箇所があります。

CSSの設定でわからない箇所があります。
ベタ塗りの背景画像と本文エリアのページ両端をドロップシャドウ効果で
縦にリピートするライン画像の背景を使用したいのですが、
途中でドロップシャドウの線が止まってしまいます。

<body>
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
のように指定して、

body {
background-image: url(img/back.gif);
background-repeat: repeat;
}



#wrapper {
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(img/shadow.png);
background-repeat: repeat-y;
}
のように設定しました。
そうすると、footerエリアは#wrapper内なので、
指定したドロップシャドウのラインの背景がブラウザ画面を拡大すると切れてしまいます。
ブラウザのサイズ、拡大縮小に関係なく、ページ最下部までドロップシャドウの背景を伸ばしたいです。
*back.gif=(ベタ塗り背景)。shadow.png=(ドロップシャドウ効果のライン)です。
それら背景をブラウザのサイズ関係なく最下層まで切れずに表示させたいです。(高さが50pixでも1000pixでも表示させたいです。)
*ページは中央配置、横幅は固定、縦は各ページで成り行きにしたいです。
*現在背景は、ベタ塗りの背景画像と、ドロップシャドウ効果のラインの背景画像の2種を使用しています。設定方法、CSSの適用場所は選びません。

以上、ご教授下さい。
宜しくお願い致します。

投稿日時 - 2010-08-11 02:40:02

QNo.6101403

困ってます

質問者が選んだベストアンサー

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

投稿日時 - 2010-08-11 21:10:07

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

いくつか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%;←追加
}

投稿日時 - 2010-08-11 12:56:39

ANo.1

ボディの背景がベタで幅固定ということでしたら、
ラップの背景をやめて以下にしてみてはいかがでしょうか。

body {
background-color: #f00;
background-image: url(img/shadow.gif);
background-repeat: repeat-y;
background-position: 800px 0;
}

もしくは、画像をPhotoshopなどで合成するなど。

投稿日時 - 2010-08-11 09:09:26

補足

ご迅速にご回答頂きまして、誠にありがとうございます。
『ベタ塗りの背景』とお伝えしましたが、正確には『細かいストライプ柄の塗り画像』なのです。
説明不足で申し訳ありません。

ですので、できれば、『ドット柄の塗り画像(back.gif)』をページ全体の背景に。
ドロップシャドウ効果のライン画像(shadouw.png)を背景エリアとの区切りになるように
本文エリアの両端につけてリピートしたいのです。

本文エリアは、横幅は固定で、中央配置。
高さは各ページで成り行きにしたいのですが、
ブラウザをどんなに拡大縮小してもドロップシャドウ効果のライン画像(shadouw.png)を
ブラウザの末端まで付けたいのです。

もし何か方法があれば再度ご教授ください。
宜しくお願い致します。

投稿日時 - 2010-08-11 10:12:49

あなたにオススメの質問