cssで設定した背景画像が表示されません

解決済

質問者：bbbbbb5
質問日時：2015/02/07 11:02
回答数：2件

ホームページ作成は素人ですので初歩的な質問ですみません。
ググっても初歩的すぎるのか解決策がみあたらず困っています。

症状としては・・cssで背景画像を設定しておりますが、ブラウザで確認しても何も表示されず、真っ白です。

<body></body>の中にテキストを入力するとテキストは表示され、さらにcssで背景画像を表示させたいところまでテキストがくると、テキストの背景に画像が現れます。
テキストに従ってそのサイズ分現れるような感じです。

また背景画像を表示させたい箇所でcssを使わずに<img src= >で画像をいれると表示されます。
ただその時に、cssの背景画像が同時に（後ろの方に）ダブって表示されます。

下記が現在の状況です。

css

body { margin:0; font-family:"Hiragino Kaku Gothic Pro","メイリオ","ＭＳＰゴシック",sans-serif;
text-align:center;
　　background-repeat: no-repeat;
background-color: #FFFFFF;
background-position: center 0px;}

#container{
text-align:left;
width:1020px;
margin:0 auto;
padding:0;}

#header{
width:1020px;
background-image: url(images/header_back.gif);
background-repeat: no-repeat;
background-position: 0;
margin:0; padding:0;
}

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon">
<link rel=stylesheet type="text/css" href="style-sheet_2015.css"/>
</head>
<body>

<div id="container">
<div id="header">
</div>
</div>
</body>
</html>

ご覧のとおり、出だしでつまずいております。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： naokita
回答日時：2015/02/07 12:09

A、

headerに背景画像(images/header_back.gif)を表示していて、
bodyに背景画像( )を設定していないからです！
全体の背景画像とヘッダの背景画像を勘違いしていないですか？？

ちなみに、DIVボックスにコンテンツ（テキストや画像）が無い場合には高さが潰れるので、背景画像は表示されません・・・

/* ●CSSを修正　ショートハンドで記述● */

body { margin:0; font-family:"Hiragino Kaku Gothic Pro","メイリオ","ＭＳＰゴシック",sans-serif;
text-align:center;
background: #FFF url(images/■■■■.jpg) no-repeat center 0;}

#container{
text-align:left;
width:1020px;
margin:0 auto;}

#header{
background: url(images/header_back.gif) no-repeat;
}

---------------------------
蛇足：

HTML4.01 Transitional では空要素を
<META /> <LINK />　としません！
HTML4.01の場合、閉じタグの　/　（スラッシュ）は不要
閉じタグに / を利用するのは、XHTMLです。

そもそも、DTDが過去互換モードになっているようですが、
どうせなら、標準準拠モードにしたほうが良いでしょう。

DIVの初期値は元々 0 だから、
margin:0; padding:0; を書く必要は無い。

- 0
- 件

通報する

この回答へのお礼

詳しく教えていただきありがとうございます。
正直、スタート段階でこれだけの指摘箇所があるとは思いもしませんでした・・
特に蛇足以下の部分。

何か根本的なところから間違ってるんですね。

HTML4.01 Transitional、XHTM、標準準拠モード　等、よく分かりませんが。
こつこつ理解しながら頑張ってみます。

今後ともご指導宜しくお願いします。

通報する

お礼日時：2015/02/07 14:04

No.1

回答者： nana_coco
回答日時：2015/02/07 12:04

#headerの場所だけリピート無しの背景画像を付けたいって事ですか？

高さの指定が無いから、文字の高さ分だけ見えてるって事かと思うのですが

#header {height: 100px; }　←これは例えばヘッダーの高さを100pxに指定

みたいに高さを加えれば、背景も見えるようになるのでは？
間違っていたらごめんなさい。

- 0
- 件

通報する

この回答へのお礼

結論から申しますと、nana_cocoさんのおっしゃる通り、高さの指示を入れたら無事に表示されました！ありがとうございました！
ヘッダーの部分だけに使用したい背景画像がありまして、その設定段階でつまずいてました。
こんなレベルですが、これから先の道のりが長そうなので、またご相談させて頂くと思いますので、その際には宜しくお願いいたします。

通報する

お礼日時：2015/02/07 13:40

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