- ベストアンサー
heaerとfooterに背景画像が難しい css
添付画像のようなサイトを作りたいと思っております。 ヘッダーもフッターも、 ブラウザウインドウの横幅いっぱいにオレンジの下地が伸びるようにしたいです。 （ウインドウサイズを変更しても常に横幅いっぱい） しかも、そのオレンジ下地は画像です。 この場合、どの要素にどのようにコーディングすれば 作る事ができますでしょうか。。？ いろいろ試して見ているのですが、ななかなうまくいかず、、焦っています。。 初心者で申し訳ないですが、ご存知の詳しい方いらっしゃいましたら 何卒ご教授、よろしくお願いいたします。
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
一番簡単なのが、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>
その他の回答 (2)
- 4649panda
- ベストアンサー率68% (15/22)
オレンジの下地が、添付画像のようなグラデーションのみのものなら、幅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>
- marutone
- ベストアンサー率40% (70/174)
あまり期待されていることとは少し違うかも知れないですが、 以下のソースをご参考にご自分なりにアレンジしてみてください。 <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>
