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
- 回答日時:
body以外では、background-imageプロパティは、width、heightを指定しないと表示されないようです。
ご回答いただき、ありがとうございました。
その点については、No.5さんのご指摘をいただいたときに、思いました。提示させていただいたように、<body>の後に要素が入らずに<div id="contents">がきていますから、高さがないことが原因であればbodyにも効かないはずでは?と推測しました。
恥ずかしながら、No.2さんのご回答ではじめて「詳細度」という言葉を知ったのですが、そのあたりが関連しているのでしょうか。
No.6
- 回答日時:
#5です。
ソースのご提示ありがとうございます。当方で試しましたが、効かないとされている方のcssとご提示のhtmlをソースとしたファイルを作成し表示させました。Ie/firefox/chomeで背景は表示されています。
他に問題があるのではないですか?現象が確認できないのでお望みのことはできていますとしか、答えられないです。
お手間とお時間を割いていただき、深謝いたします。
情報の提示が後手後手にまわりたいへん恐縮ですが、表示環境はXP/Chromeでした(バージョンは今はわかりません)。
HTML、CSSとも、やっていることはシンプルのつもりなので、原因をしぼれずに困惑しています。
No.5
- 回答日時:
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>
No.4
- 回答日時:
簡単なサンプル
★タブは_に置換してあるので戻す。
<!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>
No.3
- 回答日時:
> 根拠がわからないので解決にはなりませんが、
> #contents { height: 794px; background-image: url("./images/haikei.jpg"); }
> (※heightの値は、haikei.jpgの高さです。)
> としたら表示されました。
もしかしてdivタグの中身が空っぽだったんじゃないでしょうか?
ご回答いただき、ありがとうございました。
h1、navをルートとしたulやli、footerをルートとしたpなどにテキストは入っていました。
No.2
- 回答日時:
>そもそも、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ですので、これによって、利く利かないが変わる事はありません。
ご回答いただき、ありがとうございます。
大元を読んで理解しなければならないと思いながら、つい手近なものに目を向けてしまいます。自戒します。
No.1
- 回答日時:
タイプミス等ありませんでしょうか?
手元で試す限り、効かないと書かれているcssの記述でも問題なく表示されます。
HTML5にもdivタグはありますので、利用可能です。
ご回答いただき、ありがとうございます。
タイプミスは無かったと思います。
根拠がわからないので解決にはなりませんが、
#contents { height: 794px; background-image: url("./images/haikei.jpg"); }
(※heightの値は、haikei.jpgの高さです。)
としたら表示されました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
HTML属性での「""」 「''」違い
-
h1のテキストサイズよりh2の方...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
ヘッダーを左右に二分割する方...
-
セクションをdivで囲むと見出し...
-
グリッドレイアウトで"auto-fit...
-
改行しないようにするには?
-
空のspanタブについて
-
疑似インラインフレームの文字...
-
divの中に外部のHTMLを埋め込む
-
HTMLの禁則処理解除について
-
htmlの見出しタグ(<h1>)の次...
-
body>div{}の意味を知りたい
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
div要素が重なってします
-
min-heightとheightの違いについて
-
1時間30分を簡単に表したいで...
-
ヘッダーとフッターだけ背景を...
-
ヘッダーを左右に二分割する方...
-
<!-- #BeginLibraryItemとは
-
h1に自分自身へのリンクを張...
-
html5でheaderの中にnav
-
画面を縮小するとカラムが落ち...
-
divを横に並べる方法
-
<div>テキスト</div>
-
スペースを使わず文字位置を揃...
-
h1のテキストサイズよりh2の方...
-
1サイト内にHTML5とXHTMLが混在...
-
オシャレな区切り線はありませ...
おすすめ情報