メニューやヘッダー背景だけをブラウザの横幅いっぱい

締切済

質問者：ryou09160528
質問日時：2013/01/05 03:05
回答数：3件

下記ＵＲＬのように、メニューやヘッダー背景だけをブラウザの横幅画面いっぱいに表示して、拡大や縮小しても、延々と表示されるようにしたいのですが、どのようにしたらよいか分かりません。

ＵＲＬ：http://j-sen.jp/

どなたかご教授頂けたら幸いです。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： naokita
回答日時：2013/01/09 03:23

二重に枠を作って

※ 外枠に背景を横リピート
　※ 内枠を幅指定＋センターリング（標準モードで）


<!DOCTYPE html>
<html><body>
<div id="header"><div id="header2">ヘッダ</div></div>
<div id="content">コンテンツ</div>
<div id="footer"><div id="footer2">フッタ</div></div>
</body></html>

/* CSS */
body{ margin: 0;}
#header{ background: url(～～) repeat-x;}
#footer{ background: url(～～) repeat-x;}
#header2,#content,#footer2{ width:600px; margin: 0 auto; border:1px solid red;}

１、上記でも出来るし
２、BODYにheaderの背景画像とし、BODY直下に第二の疑似BODYの外枠（wrapper）を設置しfooterの背景画像でもよい。
その場合は、 background-position: 50% 100%; で最下部に背景画像を。
３、上記同様にhtmlとbodyに各２つの背景画像って手法もあるし。

- 0
- 件

通報する

No.2

回答者： outbrave
回答日時：2013/01/08 11:03

それでは例を。

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
#header {
background-color:#ccf;
height:50px;
}
#content {
border:solid 1px #ccc;
height:400px;
width:600px;
margin:0 auto;
}
#footer {
background-color:#99c;
height:50px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
main content
</div>
<div id="footer">
footer
</div>

</div>
</body>
</html>

1行目のDOCTYPE宣言は必要です、<html>で始めるとセンタリングできません。

- 0
- 件

通報する

No.1

回答者： outbrave
回答日時：2013/01/05 13:38

横幅（width）を、100%（または指定しない）で、背景画像を横に繰り返して表示するだけですが。

中央は横幅を指定してセンタリング（margin:auto）します。

この回答への補足

ご回答いただきありがとうございます。また、お礼が遅くなり大変申し訳ございませんでした。

>横幅（width）を、100%（または指定しない）で、背景画像を横に繰り返して表示するだけですが。
⇒こちらは、ご指摘の通りにrepeatを使用して解決できました。

>中央は横幅を指定してセンタリング（margin:auto）します。
⇒こちらがどのような意味なのかが分からなかったのですが、よろしければ詳しく教えていただけないでしょうか？

教えていただいたにも関わらず、知識が乏しく、再質問してしまい申し訳ございません。

補足日時：2013/01/06 00:42

通報する