ベストアンサー

ホームページの背景設定

2011/04/16 18:08

HPの背景の画像を制作したのですが、図のようにA、Bと言うページを作った際にコンテンツの長さが異なった場合は背景の長さも変更しなくてはいけないと思うのですが、どのようにして良いか解りません。どのようにｈｔｍｌやCSSを設定すればよいでしょうか？

miki722215
お礼率10% (3/28)

ホームページ作成ソフト
回答数4
ありがとう数0

みんなの回答 （4）
専門家の回答

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

ベストアンサー

rieko000
ベストアンサー率100% (2/2)

2011/04/18 12:31 回答No.4

すごくざっくりしたソースですが、下記を参考に作ってみました。 ※ツイッターの背景をちょっと拝借してますが。 ○ポイント1 コンテンツ内容が少なくても、フッターの背景色を延ばしたい →bodyに背景色を入れる ○ポイント2 コンテンツ上部に背景を入れたい →1つ目のdivに上部の背景を「top」で入れる ○ポイント3 コンテンツの下部に背景を入れたい →1つ目のdivの中に、下部の背景を「bottom」で入れる ※注意事項上下の背景が重なるくらいコンテンツ内容が少ないと、上部の背景は、下部の背景にかぶってしまいます。なので、かぶらない程度にコンテンツの高さ、最小値を決めていれておくとよいと思います。例） #Container-inner { background: url(http://twitter.com/images/themes/theme1/bg.png) left bottom repeat-x; _height: 500px; /*IE6対策*/ min-height: 500px; } 【ソースサンプル】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> body { background: #ddd; margin: 0; padding: 0; } h1 { margin: 0; padding: 0; } #Container { background: url(http://a3.twimg.com/a/1302214109/images/themes/theme4/bg.gif) left top repeat-x #0099B9; } #Container-inner { background: url(http://twitter.com/images/themes/theme1/bg.png) left bottom repeat-x; } #Footer { margin: 20px; height: 40px; } </style> </head> <body>  <div id="Container">  <div id="Container-inner"> <h1>サンプルHTML集</h1> <pre>Contents-inner ああああ </pre> </div>  </div>   <div id="Footer"> Footer </div>  </body> </html>

その他の回答 (3)

DrFell
ベストアンサー率55% (305/551)

2011/04/17 07:18 回答No.3

css ------------------ body{margin:0;padding:0;background:yellow url(01.jpg) no-repeat top center;} div#contents{margin:50px auto 0;width:500px;background:url(02.jpg) no-repeat bottom center;} div#footer{margin:0;background-image:none;background:#999999; width:100%;border:none;text-align:center;} div div{margin:0 auto 50px;padding:2em;border:2px solid #999999;height:300px;} html ------------------ <body> <div id="contents"> <div>コンテンツ</div> </div> <div id="footer">フッター</div> </body> 背景の長さをページごとに変えていたら大変です。1枚の画像では伸び縮みしませんので、画像を2つにします。が、cssでは1つのボックスに1つの背景画像しか置けません。この場合、bodyに上の背景と全体の色を、div contentsでコンテンツ全体を囲むことで2枚目の背景画像を表示し、その下にフッターを配置します。height:300px;は本来不要ですが、1つ目の画像と2つ目の画像の高さ以上の高さがdivにないと画像が表示されないので、入れました。

naokita
ベストアンサー率57% (1008/1745)

2011/04/17 01:05 回答No.2

NO.1さんの言う通りですが、真ん中部分が画像が無いので、そこは伸ばしても問題無いようですね。（伸ばすと言うより色で表現）その条件下なら、現在１枚の画像を２枚にスライスして上下に配置するって事。その２枚の上下画像をBODYまたはDIVに上部の背景画像を設置し、直下のDIVを追加し下部の背景画像を設置。 ※ px部分の数値は適当に微調整 ※ 当然、画像は透過の方が色の切れ目が一切無くなる。 ----------------- /* CSS */ #AAA{ background: yellow url(AAA.gif) no-repeat 50% 0; padding: 80px 0; } #BBB{ background: url(BBB.gif) no-repeat 50% 100%; } #AAA,#footer{ width:600px; margin:0 auto;}  <div id="AAA"> <div id="BBB"> <div style="margin:0 auto;width:400px;border:4px solid gray;"> <p>内容</p> </div> <div> <div> <div id="footer"><p>footer</p></div>