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

「ホームページの背景設定」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (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-transitio …
<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/t …) 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>

<!-- ##### Container Start ##### -->
<div id="Container">
<!-- ##### Container-inner Start ##### -->
<div id="Container-inner">


<h1>サンプルHTML集</h1>
<pre>Contents-inner

























ああああ
</pre>
</div>
<!-- ##### /Container-inner End ##### -->
</div>
<!-- ##### /Container End ##### -->

<!-- ##### Footer Start ##### -->
<div id="Footer">
Footer
</div>
<!-- ##### /Footer End ##### -->
</body>
</html>
    • good
    • 0

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にないと画像が表示されないので、入れました。
    • good
    • 0

NO.1さんの言う通りですが、


真ん中部分が画像が無いので、
そこは伸ばしても問題無いようですね。(伸ばすと言うより色で表現)
その条件下なら、
現在1枚の画像を2枚にスライスして上下に配置するって事。
その2枚の上下画像を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;}

<!-- HTML -->
<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>
「ホームページの背景設定」の回答画像2
    • good
    • 0

普通背景を固定すればコンテンツが縦に長くなってもその分スクロールバーが出るので


背景を長くさせる必要ないし意味がありません。

この添付図を見ると背景の真ん中部分だけ間延びさせるように見ますが、
そんなこと何をどうやっても出来ません。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング