- ベストアンサー
CSSでのレイアウトについて
- CSSやHTMLのテンプレートをカスタマイズ中です。画面中央に四角いコンテンツを配置しながら、サイドに背景画像を表示したいです。
- 現在、背景画像の指定をBODY要素に行っているため、中央コンテンツ上にも背景画像が表示されてしまっています。外枠や中央コンテンツの文章は読めるものの、枠外背景にのみ画像を表示する方法を知りたいです。
- 提供されたCSSの一部を抜粋すると、BODY要素にはbackground-imageプロパティが指定されています。また、中央コンテンツは#maincont要素で定義されており、幅が600px、上下には30pxのパディングが指定されています。
- frambo13
- お礼率87% (7/8)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんばんわ うまくいかなかったんですね。 現状がよくわかりませんね。 せめてどのブラウザで確認しようとしてるのか教えてください。 下のファイルを作ってie9で閲覧したところ、問題なくレイアウト別れてました。 ※ヘッダフッタの色、高さ、文字などは意味ありません。 ↓↓↓↓test.html↓↓↓↓↓ <html> <head> <title>TEST</title> <style type="text/css"> <!-- * { margin:0; padding0;} html{ height:100%; } body{ background-image: url('/画像ファイルのパス'); background-repeat: repeat; text-align:center; height:100%; } #header{ height:30px; width:100%; background:red; } #maincont{ width:600px; margin:0 auto; background:white; height:90%; } #footer{ height:30px; width:100%; background:yellow; } --> </style> </head> <body> <div id="header">test header</div> <div id="maincont"><p>test</p></div> <div id="footer">test footer</div> </body> </html> ↑↑↑↑ここまで↑↑↑↑↑ backgroundでは無くackground-colorを使って背景色を指定するとか Doctypeとかの宣言は？ テキストになったってのがよくわからないですが、上記のhtmlを実行したらどうなりますか？
その他の回答 (1)
- qtyam
- ベストアンサー率42% (23/54)
画面中央の部分の背景色が無いだけでは？？？ 私の個人環境で試したもの↓↓↓↓ ※windows7のIE9 中央のコンテンツ部分を縦100%指定してるのと、 デフォルトの余白を0にしてるのは、あまり気にしないでください。 気持ちの問題ですので、、 --スタイルシートここから-- * { margin:0; padding0; } html{ height:100%; } BODY{ background-image: url('*****'); background-repeat: repeat; height:100%; } #maincont{ width:600px; margin:0 auto; padding:30px border-left:3px red dotted; border-right:3px blue dotted; height:100%; /* これが肝かな */ background:white; }
お礼
ありがとうございます。 やってみましたがレイアウトなしのヘッダーとフッターのみ。テキスト表示のようになってしまいました。 まだうまくいきません。
お礼
ありがとうございます。 z-indexを使って解決しました。