- ベストアンサー
CSS使用時のDIVにおける背景指定について
- CSSを使用してDIVの背景を指定する方法について疑問があります。
- 特にヘッダー部分の背景画像が表示されない問題に悩んでいます。
- DIV id="h-top"とDIV id="h-cate"の背景画像の設定方法がわかりません。
- ishibo_062
- お礼率26% (8/30)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
backgroundプロパティに画像を指定する場合の記述についてはANo.2の回答者様のご指摘の通りです。 ですが、 > DIV#.h-top {（省略）} 全体の記述の仕方が間違っていますね。 <div id="h-top">に対応させるのであれば、 DIV#h-top {（省略）} もしくは #h-top {（省略）} でなければなりません。backgroundだけでなく、指定したプロパティが全部無効になっていませんか？ ・id属性なら、div#h-top（一意セレクタ） ・class属性なら、div.h-top（クラス・セレクタ） CSS のシンタックスをまず理解することですね。 > テストで見ているブラウザはIE６ですが、ブラウザがいけないのでしょうか？ 確かにIE6はCSSの解釈に関しては色々と問題の多いブラウザではありますが、これはブラウザのせいではないですよ。
その他の回答 (2)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
background-image: に repeatは書けません。background-repeat:に 書くか、まとめて書きたければbackground: にしましょう。
補足
アドバイスありがとうございます。 早速行なってみましたが、 DIV#.h-top { width:100%; height:100px; margin:0; background-image: url(./header/header-bg.jpg); background-repeat:repeat-x; } でも、 DIV#.h-top { width:100%; height:100px; margin:0; background:url(./header/header-bg.jpg) repeat-x; } でも、背景画像は表示されませんでした。 ひょっとするとテストで見ているブラウザはIE６ですが、 ブラウザがいけないのでしょうか？
- abril
- ベストアンサー率69% (388/560)
実際のCSSを見ないと何がうまくいかないのかわかりませんが、充分実現可能だと思いますが…。 > 共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく > 困っております。 通常で考えれば、div#h-top、div#h-cate、にbackgroundプロパティで背景画像をレンダリングしてやればOKな筈です。 floatを併用している場合、親子関係によっては親要素の背景がレンダリングされないという現象が起こったりしますが（これも解決できますけど）、この構造図を見る限り、ヘッダーの中をfloatしている感じはありませんし。 あくまで判断要素の少ない現状での発言です。
補足
早々にアドバイスを頂きありがとうございます。 ＣＳＳの記載は、下記の通りです。 ※ＣＳＳは別ファイルになってます。 DIV#.header { width:100%; height:143px; margin:0; } DIV#.h-top { width:100%; height:100px; margin:0; background-image: url(./header/header-bg.jpg) repeat-x; } DIV#.h-cate { width:100%; height:43px; margin:0; background-image: url(yyy.jpg) repeat-x; } 上記では無理でしょうか？
お礼
ありがとうございます。 DIV#h-top {（省略）} ↑上記にて訂正したところ希望通りに表示されるようになりました。 CSSに関しては本を何冊か購入し読んではみたのですが、１冊目と２冊目…あるいは３冊目など内容が変わってきたりとどれがあっているのか訳が分からなく、自分自身でも色々と試してみたり行なっています。 意外とCSSを行なう上で、その人思考？みたいなものがあるのか不明ですが、自分でもいつのまにか出来ていたなんて事もあるので、不思議ですね。 特に最近はテーブルに関して興味を持っており「dl」要素に関して、色々なサイトのタグなどを比べては意味深に興味深く掘り下げて研究しております。 何かオススメの勉強法などありましたらまたお願いします。 この度は、本当にありがとうございました。