heaerとfooterに背景画像が難しい　css

解決済

質問者：noname#179453
質問日時：2011/02/23 18:06
回答数：3件

添付画像のようなサイトを作りたいと思っております。

ヘッダーもフッターも、
ブラウザウインドウの横幅いっぱいにオレンジの下地が伸びるようにしたいです。
（ウインドウサイズを変更しても常に横幅いっぱい）

しかも、そのオレンジ下地は画像です。

この場合、どの要素にどのようにコーディングすれば
作る事ができますでしょうか。。？

いろいろ試して見ているのですが、ななかなうまくいかず、、焦っています。。
初心者で申し訳ないですが、ご存知の詳しい方いらっしゃいましたら
何卒ご教授、よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： naokita
回答日時：2011/02/23 22:38

一番簡単なのが、bodyに上部画像、次枠に下部画像を横にリピート

メインをセンター配置（DTDが不明なのでオールマイティに・・・）

画像の高さとコンテンツの上下差に合わせて、
padding: 20px 0 10px;の数値を変更すればお好みになる。

<head>
<style type="text/css">
body{ margin: 0; padding: 0;
background: white url(上部画像.jpg) repeat-x;}
#body2{ text-align: center; padding: 20px 0 10px;
background: url(下部画像) repeat-x left bottom;}
#wrapper{ margin: 0 auto; text-align:left; width:600px;
background-color: white; border: 1px solid silver;}
</style>
</head>
<body>
<div id="body2">
<div id="wrapper">
<h1>コンテンツ</h1>
<h2>コンテンツ</h2>
<h3>コンテンツ</h3>
<p>コンテンツ</p>
</div>
</div>
</body>

- 0
- 件

通報する

No.2

回答者： 4649panda
回答日時：2011/02/23 22:14

オレンジの下地が、添付画像のようなグラデーションのみのものなら、幅10px程度のグラデーション画像(仮にorange.jpg)を作って、#headerと#footerのcssに

background: #ffffff url(orange.jpeg) repeat-x; /*横向きのみにリピート*/

を加えてはいかがでしょう？

全体的には、こんな感じで...

CSS側

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

#container{
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
background: #ffffff;
}

#header {
height: 80px;
width: 100%;
background: #ffffff url(orange_80.jpg) repeat-x;
}
#content {
padding-bottom: 50px;
}

#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background: #ffffff url(orange_50.jpg) repeat-x;
}

HTML側

<body>

<div id="container">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
</div>

<div id="footer">
FOOTER
</div>
</div>

</body>

- 0
- 件

通報する

No.1

回答者： marutone
回答日時：2011/02/23 20:25

あまり期待されていることとは少し違うかも知れないですが、

以下のソースをご参考にご自分なりにアレンジしてみてください。

<html>
<head>
　　<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
　　<table height="100" width="100%" cellpadding="0" cellspacing="0"
　　background="image/a.png">
　　　　<tr>
　　　　　　<td></td>
　　　　</tr>
　　</table>
　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
　　<table height="100" width="100%" cellpadding="0" cellspacing="0"
　　background="image/a.png">
　　　　<tr>
　　　　　　<td></td>
　　　　</tr>
　　</table>
　　<table border="1" height="400" width="500" cellpadding="0" cellspacing="0"
　　bgcolor="white" style="position: absolute; top: 50px; left: 200px;">
　　　　<tr>
　　　　　　<td>あああああ</td>
　　　　</tr>
　　</table>
</body>
</html>