- ベストアンサー
CSSで複数の背景画像を実装する方法
- 背景画像を複数枚使いたい場合、CSSのbackgroundプロパティを利用することで実装することができます。
- backgroundプロパティを使用する際には、重ねる順番や位置、繰り返し方向などを指定することができます。
- また、背景画像を指定する際は、相対パスや絶対パスを使用することができます。
- orodemwova
- お礼率41% (14/34)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは もう解決しているかもしれませんが、一応。 <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-16" /> <meta http-equiv="content-Language" content="ja" /> <meta http-equiv="content-style-type" content="text/css" /> <title>ホームページタイトル</title> <meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <meta name="discription" content="コンテンツの概要" /> <meta name="author" content="名前" /> <meta name="copyright" content="著作権" /> <style> *{ margin: 0; padding: 0; } body { margin:0; padding:0; background-image: url(フォルダ/ファイル.jpg) repeat-y top center; } #Top-bgimage{ width: 100%; height: 200px; background-image: url(フォルダ/ファイル.jpg) no-repeat top center; } #wrapper { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; z-index: 1; top: 0; } #content { margin:0 auto; padding: 0; width: 800px; height: 100%; background:white; } #footer { width:100%; height: 100px; margin: 0; padding: 0; background:#000000; text-align:center; } </style> </head> <body> <div id="Top-bgimage"></div> <div id="wrapper"> <div id="content">コンテンツ</div> <div id="footer"> <p>footer</p> </div> </div> </body> </html> こんな感じです。参考になればいいのですが。
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
画像の位置の発想を逆にすると・・・ １、グラデ画像と赤円（上画像）を一体化。 ２、青円（下画像）を最背景にして、赤円（上画像）を被せる。 ３、青円（下画像）は最背景で全面縦リピートするが、 赤円（上画像）とfooterで隠れて見えなくなるから、 header画像の真下からfooterの手前までしか伸びていないように見える。 ------------------ body { margin:0; padding:0; background:#E4E4E4 url(下画像.gif) 50% ●px repeat-y;} #body2 { background: url(上画像.gif) 50% 0 repeat-x;} #wrapper { margin:0 auto; width: 960px; background:white;} #footer { background:#E4E4E4 url(上画像.gif) 50% 100%; width:100%; text-align:center;} <body> <div id="body2"> <div id="wrapper">コンテンツ</div> <div id="footer"><p>footer</p></div> </div> </body> <!-- ※ 上画像制作時に色付で適当な高さを確保して保存。 グラデの一体化が無理なら<body>と<div id="body2">の間に <div id="body1">として、グラデ画像を咬まし、repeat-x。 その場合は、<div id="body2">は、no-repeat。 ※ 下画像は最背面で、縦座標の●pxは上画像自体の高さ。 ※ footerは上画像の下部を再利用するか、画像無しで統一の背景色だけでもOK。 -->
お礼
今回は下方向へのリピートは辞めることにしました。 今後同じようなデザインをコーディングする機会がありましたら参考にさせていただきます。 ありがとうございました!!!
お礼
急遽下方向へのリピートは辞めることになり無事納品することができました。 今後同じようなデザインをコーディングする機会がありましたら参考にさせていただきます。 ご丁寧にありがとうございました!!!