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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
div要素が重なってします
-
html の divとtable の役割
-
グラフィックス
-
divとpの使いわけ
-
画面を縮小するとカラムが落ち...
-
フッターがウインドウの一番下...
-
idとclassの指定方法
-
htmlの見出しタグ(<h1>)の次...
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
reuterのScraypingで不思議な現...
-
レスポンシブかつ、スマホ、携...
-
ホームページ作成会社を探して...
-
<BR> が多数連続しています。
-
リストで画像を右に表示したい
-
コンピューターの画像ブロック
-
特定範囲内のCSSの継承を断ち切...
-
<!-- #BeginLibraryItemとは
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報