- ベストアンサー
CSSで背景を表示
CSSで背景をブラウザいっぱいに表示するにはどうしたらいいですか。 コカコーラのホームページのようにヘッダー部分とフッター部分の背景を幅の広い画面で見たときも背景が表示されるようにしたいです。 よろしくお願いします。 http://www.cocacola.co.jp/
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
「幅を縮めて、もう一度幅を広げる」のでは無く 「幅を縮めて、横スクロールバーを出現させてバーを右に移動させる」と背景が消えました。 これ同じ現象でしょうか？ #global_FOOTERと #global_HEADERに width:100%; min-width:960px; を追加してみてください。 あと #global_HEADERの overflow : hidden; は消したほうがいいかもしれないです。
その他の回答 (4)
- salonpath
- ベストアンサー率48% (194/399)
ん～すみません firefoxとie8で見る限り、縮めて伸ばしても消えないです。
補足
何度も大変申し訳ございません。 やはりfirefox最新とIE7で幅を縮めて、もう一度幅を広げると、headerとfooterの背景がその分だけ消えてしまいました。 CSSの方で、このやり方はデフォルトスタンダードではないのでしょうか? よろしくお願いします。
- salonpath
- ベストアンサー率48% (194/399)
id="global_HEADER"の部分です。 と、言われても。。。 もう一度補足要求しますが 「最小の記述をしても消えますか？」 試しにこちらで組み込んだものはブラウザのサイズを変更しても背景は消えませんでした。 なのでddmat312さんが書いた他の部分のhtmlの書き方かcssの指定が邪魔をしてるのではないでしょうか。 そういうのはサイト全体を通してみないと原因がわからないので答えられないです。 <!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-8" /> <title>qa5202901</title> <style type="text/css"> #wrap{ background:url(../images/bg-title.png) repeat-x; } #content{ width:500px; margin:0 auto; background:#d8d8d8; height:200px; } #global_FOOTER { background-image : url(../images/bg-title.png); background-position : 0px 0px; background-repeat : repeat-x; border-top-color : #999999; border-top-style : solid; border-top-width : 5px; color : #666666; padding-bottom : 5px; padding-top : 5px; text-align : center; margin-left : auto; margin-right : auto; } </style> </head> <body> <div id="wrap"><div id="content">aiueo</div> <div id="global_FOOTER">copyright</div></div> </body> </html>
補足
http://dovie.d.mepage.jp/ このページです。よろしくお願いします。
- salonpath
- ベストアンサー率48% (194/399)
>縮めた分だけ背景が消えて、画面を広げたときにも消えたままです。 え？ 他の部分のhtmlの書き方かcssの指定が悪いのか、ブラウザ（全てのブラウザか一部のブラウザかわかりませんけど）が悪いのかわかりませんが、こちらではその現象を再現できないです。 最小の記述をしても消えますか？ <!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-8" /> <title>qa5202901</title> <style type="text/css"> #wrap{ background:url(img/test.gif) repeat-x; } #content{ width:500px; margin:0 auto; background:#d8d8d8; height:200px; } </style> </head> <body> <div id="wrap"><div id="content">aiueo</div></div> </body> </html>
補足
#global_FOOTER { background-image : url(../images/bg-title.png); background-position : 0px 0px; background-repeat : repeat-x; border-top-color : #999999; border-top-style : solid; border-top-width : 5px; color : #666666; padding-bottom : 5px; padding-top : 5px; text-align : center; margin-left : auto; margin-right : auto; } id="global_HEADER"の部分です。 このCSSでは消えてしまいます。
- salonpath
- ベストアンサー率48% (194/399)
たとえばbodyの背景なら body{ background:url(背景.gif) repeat-x; } repeat-xは横に繰りかえしyだと縦に繰り返し http://www.htmq.com/style/background-repeat.shtml
補足
ありがとうございます。 divに背景を指定した場合、一旦ブラウザの画面を縮めると縮めた分だけ背景が消えて、画面を広げたときにも消えたままです。
お礼
無事に解決しました。 長い時間ありがとうございました。