背景画像

質問

http://www.passtime.jp/
の様に、背景画像がブラウザいっぱいで切れ目がなく、模様
がちゃんと外枠に合うようにするにはどうしたらいいのでしょうか？

回答No.1

KI401 · ベストアンサー

背景画像と包含ボックスの幅を合わせるだけじゃない？
そのサイトなら、↓のようになってる。

[layout.css]

body {
margin:0px;
padding:0px;
background:url(../img/bg_white.jpg) center top repeat-y;
font-size:12px;
}

#wrapper1 {
margin:0px;
padding:0px;
background:url(../img/bg.jpg) center top no-repeat;
font-size:12px;
}

#wrapper2 {
width:900px;
margin:0 auto 0 auto;
padding:40px 0 0 0;
text-align:left;
}

#wrapper3 {
background:#FFFFFF;
width:600;
margin:20px auto;
text-align:left;
padding:15px;
}

補足

KI401さんありがとうございます。
柄のある背景はwrapper1のbgだということでしょうか？
すみまんせんが、bg_white.jpg　bg.jpg　はどれに当たるんでしょうか？　お手数だと思いますがよろしくお願いします。

回答No.3

abril

ANo.2です。タイポがありましたので訂正しておきます。

【誤】http://www.passtime.jp/common/layout.css
↓
【正】http://www.passtime.jp/common/css/layout.css

失礼しました。

お礼

おっしゃるとおりです。やってみます。
KI401さん、abrilさんありがとうございます。

回答No.2

abril

> すみまんせんが、bg_white.jpg　bg.jpg　はどれに当たるんでしょうか？

ANo.1様がCSSのソースまで抜粋して下さっているのだから、そこから画像のパスを導き出してブラウザで直接表示させれば済む事です。

・HTMLファイルのパス
http://www.passtime.jp/（index.html）
↓
・CSSファイルのパス（HTMLファイルのソースを表示させると<link rel="stylesheet" type="text/css" media="all" href="common/css/layout.css" />とあるわけだから）
http://www.passtime.jp/common/layout.css
↓
・画像のバス（上記CSSファイル中で"background:url(../img/画像ファイル名)～;"とあるのだから）
http://www.passtime.jp/common/img/bg.jpg
http://www.passtime.jp/common/img/bg_white.jpg

参考にしたいレイアウトを見つけたら、まずはHTMLのソースを見て、参照されているCSSファイルを見て、知りたい点が背景画像に関してならCSSファイル中からどの様に参照・設定されているかを探す…という基本姿勢を身に付けられる事をお奨めします。
ちなみに、Firefoxなどでは、画像の箇所を右クリックするだけでそこに適用されている背景画像を別途表示できますよ。簡単です。拡張機能を使えばブラウザ上でどの場所にどういうスタイルや画像が使用されているかの情報を表示させたりもできるので更に便利です。