- 締切済み
background-imageが効かない
HTML5で組んだページでCSSを使っています。 bodyタグに設定したbackground-imageは背景に画像が表示されるのですが、body内に置いたid名をつけたdivタグに設定したbackground-imageが効きません。どのようにすれば効くのでしょうか。 【効く】 body { background-image: url("./images/haikei.jpg"); } 【効かない】 #contents { background-image: url("./images/haikei.jpg"); } そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- 56quest
- ベストアンサー率33% (1/3)
body以外では、background-imageプロパティは、width、heightを指定しないと表示されないようです。
- DrFell
- ベストアンサー率55% (305/551)
＃５です。ソースのご提示ありがとうございます。 当方で試しましたが、効かないとされている方のｃｓｓとご提示のｈｔｍｌをソースとしたファイルを作成し表示させました。Ie/firefox/chomeで背景は表示されています。 他に問題があるのではないですか？現象が確認できないのでお望みのことはできていますとしか、答えられないです。
お礼
お手間とお時間を割いていただき、深謝いたします。 情報の提示が後手後手にまわりたいへん恐縮ですが、表示環境はXP/Chromeでした(バージョンは今はわかりません)。 HTML、CSSとも、やっていることはシンプルのつもりなので、原因をしぼれずに困惑しています。
- DrFell
- ベストアンサー率55% (305/551)
No.3さんへの回答が気になります。 それでつまり、目的のdivの中に「h1、navをルートとしたulやli、footerをルートとしたp」などが入っていて、divが空ではなく高さがあったのか、高さが全くなかったのかが問題です。 divの中身がない場合、背景は表示されません。なぜなら、divに高さがないため背景は必要ないのです。コンテンツとしてのimgならそれが主体になり、表示されますが、背景は背景が必要な場合にのみ出るわけで、主体もないのに背景だけでることはないです。 その為、そのdivをheight: 794pxと背景をだす高さを指定すると出現したのではと考えたNo3さんへの答えがどっちとも取れるようなので困りましたね。 そのdivに<p>ああああ</p>とかを入れて試し、2行、3行にして試して、徐々に出現するなら、やはり高さがないからだし、違えば他の事を考えないと。 その事象が出現する最低限のソースを頂くのが一番早いですが。ご存知の通り、cssソースだけもらっても、検証できません。
お礼
ご回答いただき、ありがとうございます。不十分な状態で質問してしまい、申し訳ありませんでした。そのままを載せることはできないのですが、以下のようなHTMLソースでした。 <body> <div id="contents"> <header> <nav id="nv_l"> <ul> <li><a href="" title="">メニュー</a></li> <li><a href="" title="">メニュー</a></li> <li><a href="" title="">メニュー</a></li> </ul> </nav> <h1>ページタイトル</h1> <nav id="nv_r"> <ul> <li><a href="" title="">メニュー</a></li> <li><a href="" title="">メニュー</a></li> <li><a href="" title="">メニュー</a></li> </ul> </nav> </header> <footer> <p> Copyright(C) hogehoge all rights reserved. </p> </footer> </div> </body>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
簡単なサンプル ★タブは＿に置換してあるので戻す。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- html,body{margin:0;padding:0;height:100%;width:100%;} body{ background:silver url("./images/haikei.jpg"); background-size:contain; } header,section,footer{ background-image:url("./images/haikei.jpg"); padding:5px; width:60%;margin:0 auto; min-height:20%; background-size:cover; opacity:0.7; } section{position:relative;;min-height:60%;} section h2,section p{margin-left:20%;} section aside{width:18%;height:100%;position:absolute;top:0;left:0;background-color:rgba(255,255,255,0.8);} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿＿記事 ＿＿</p> ＿＿<aside> ＿＿＿<h3>Something aside</h3> ＿＿</aside> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
お礼
具体例をご提示いただき、ありがとうございます。 不勉強で知らない点が多々ありました。早速ためしてみたいと思います。
- t_ohta
- ベストアンサー率38% (5238/13705)
＞ 根拠がわからないので解決にはなりませんが、 ＞ #contents { height: 794px; background-image: url("./images/haikei.jpg"); } ＞ （※heightの値は、haikei.jpgの高さです。） ＞ としたら表示されました。 もしかしてdivタグの中身が空っぽだったんじゃないでしょうか？
お礼
ご回答いただき、ありがとうございました。 h1、navをルートとしたulやli、footerをルートとしたpなどにテキストは入っていました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。 これは意味が違います。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Note: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )］より 直訳すると「他に適切な要素がないときの最後の最後の手段としてdiv要素を使うことを強く推奨する。div要素より適切な要素を使用することは、著者にとっては保守性の向上に、読者にはってはより良いアクセス性につながる。」 元々、1999年勧告のHTML4.01のときから『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』とされてきましたから、 <div class="article"> <div class="header">文書のヘッダ</div> <div class="section">本文</div> <div class="footer">文書のフッタ</div> </div> とされてきたと思いますが、それが、HTML5では <article> <header>文書のヘッダ</footer> <section>本文</section> <footer>文書のフッタ</footer> </article> とマークアップせよと言う意味です。 【効く】 body { background-image: url("./images/haikei.jpg"); } 【効かない】 #contents { background-image: url("./images/haikei.jpg"); } 前者は詳細度は0,0,0,1、後者は0,1,0,0ですので、これによって、利く利かないが変わる事はありません。
お礼
ご回答いただき、ありがとうございます。 大元を読んで理解しなければならないと思いながら、つい手近なものに目を向けてしまいます。自戒します。
- t_ohta
- ベストアンサー率38% (5238/13705)
タイプミス等ありませんでしょうか？ 手元で試す限り、効かないと書かれているcssの記述でも問題なく表示されます。 HTML5にもdivタグはありますので、利用可能です。
お礼
ご回答いただき、ありがとうございます。 タイプミスは無かったと思います。 根拠がわからないので解決にはなりませんが、 #contents { height: 794px; background-image: url("./images/haikei.jpg"); } （※heightの値は、haikei.jpgの高さです。） としたら表示されました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ご回答いただき、ありがとうございました。 その点については、No.5さんのご指摘をいただいたときに、思いました。提示させていただいたように、<body>の後に要素が入らずに<div id="contents">がきていますから、高さがないことが原因であればbodyにも効かないはずでは？と推測しました。 恥ずかしながら、No.2さんのご回答ではじめて「詳細度」という言葉を知ったのですが、そのあたりが関連しているのでしょうか。