重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

background-imageが効かない

締切済

  • 質問者：furnace
  • 質問日時：
  • 回答数：7件

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タグを使うこと自体が誤りなのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.7

  • 回答者： 56quest
  • 回答日時：

body以外では、background-imageプロパティは、width、heightを指定しないと表示されないようです。

    • good
    • 6
    • 件
通報する
この回答へのお礼

ご回答いただき、ありがとうございました。
その点については、No.5さんのご指摘をいただいたときに、思いました。提示させていただいたように、<body>の後に要素が入らずに<div id="contents">がきていますから、高さがないことが原因であればbodyにも効かないはずでは？と推測しました。
恥ずかしながら、No.2さんのご回答ではじめて「詳細度」という言葉を知ったのですが、そのあたりが関連しているのでしょうか。

通報する
お礼日時：2014/01/11 08:53

No.6

  • 回答者： DrFell
  • 回答日時：

＃５です。

ソースのご提示ありがとうございます。

当方で試しましたが、効かないとされている方のｃｓｓとご提示のｈｔｍｌをソースとしたファイルを作成し表示させました。Ie/firefox/chomeで背景は表示されています。

他に問題があるのではないですか？現象が確認できないのでお望みのことはできていますとしか、答えられないです。
    • good
    • 1
    • 件
通報する
この回答へのお礼

お手間とお時間を割いていただき、深謝いたします。
情報の提示が後手後手にまわりたいへん恐縮ですが、表示環境はXP/Chromeでした(バージョンは今はわかりません)。
HTML、CSSとも、やっていることはシンプルのつもりなので、原因をしぼれずに困惑しています。

通報する
お礼日時：2014/01/11 08:45

No.5

  • 回答者： DrFell
  • 回答日時：

No.3さんへの回答が気になります。


それでつまり、目的のdivの中に「h1、navをルートとしたulやli、footerをルートとしたp」などが入っていて、divが空ではなく高さがあったのか、高さが全くなかったのかが問題です。

divの中身がない場合、背景は表示されません。なぜなら、divに高さがないため背景は必要ないのです。コンテンツとしてのimgならそれが主体になり、表示されますが、背景は背景が必要な場合にのみ出るわけで、主体もないのに背景だけでることはないです。

その為、そのdivをheight: 794pxと背景をだす高さを指定すると出現したのではと考えたNo3さんへの答えがどっちとも取れるようなので困りましたね。

そのdivに<p>ああああ</p>とかを入れて試し、2行、3行にして試して、徐々に出現するなら、やはり高さがないからだし、違えば他の事を考えないと。

その事象が出現する最低限のソースを頂くのが一番早いですが。ご存知の通り、cssソースだけもらっても、検証できません。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答いただき、ありがとうございます。不十分な状態で質問してしまい、申し訳ありませんでした。そのままを載せることはできないのですが、以下のような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>

通報する
お礼日時：2014/01/10 20:40

No.4

  • 回答者： ORUKA1951
  • 回答日時：

簡単なサンプル


★タブは＿に置換してあるので戻す。

<!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>
    • good
    • 1
    • 件
通報する
この回答へのお礼

具体例をご提示いただき、ありがとうございます。
不勉強で知らない点が多々ありました。早速ためしてみたいと思います。

通報する
お礼日時：2014/01/10 09:19

No.3

  • 回答者： t_ohta
  • 回答日時：

＞　根拠がわからないので解決にはなりませんが、


＞　#contents { height: 794px; background-image: url("./images/haikei.jpg"); }
＞　（※heightの値は、haikei.jpgの高さです。）
＞　としたら表示されました。

もしかしてdivタグの中身が空っぽだったんじゃないでしょうか？
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答いただき、ありがとうございました。
h1、navをルートとしたulやli、footerをルートとしたpなどにテキストは入っていました。

通報する
お礼日時：2014/01/10 09:16

No.2

  • 回答者： ORUKA1951
  • 回答日時：

＞そもそも、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 … )］より
　直訳すると「他に適切な要素がないときの最後の最後の手段としてdiv要素を使うことを強く推奨する。div要素より適切な要素を使用することは、著者にとっては保守性の向上に、読者にはってはより良いアクセス性につながる。」
　元々、1999年勧告のHTML4.01のときから『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』とされてきましたから、
<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ですので、これによって、利く利かないが変わる事はありません。




　
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただき、ありがとうございます。
大元を読んで理解しなければならないと思いながら、つい手近なものに目を向けてしまいます。自戒します。

通報する
お礼日時：2014/01/09 16:20

No.1

  • 回答者： t_ohta
  • 回答日時：

タイプミス等ありませんでしょうか？


手元で試す限り、効かないと書かれているcssの記述でも問題なく表示されます。

HTML5にもdivタグはありますので、利用可能です。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答いただき、ありがとうございます。
タイプミスは無かったと思います。

根拠がわからないので解決にはなりませんが、

#contents { height: 794px; background-image: url("./images/haikei.jpg"); }
（※heightの値は、haikei.jpgの高さです。）

としたら表示されました。

通報する
お礼日時：2014/01/09 16:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報