※ ChatGPTを利用し、要約された質問です(原文:ホームページの背景画像が表示されない。)
このQ&Aのポイント
ホームページ作成中に背景画像が表示されない問題に困っています。
背景画像を正しく表示するために試したが、うまくいかない。
サンプルのホームページを公開しており、アドバイスをいただきたいです。
ホームページ作成を行っておりますが、どうしても背景画像が表示しなくて困っております。
構成としては、ものすごく単純な構成なのですが・・。
構成は図に記載させていただきました。
大枠を【Contents】というDiv要素で囲み、
その中に【mainArea】【subArea】をDiv要素配置しております。
【mainArea】はFloat:Left【subArea】はFloat:Rightを設定し左右に配置しております。
【subArea】の中にさらに【6Support】というDiv要素を作り、その中に背景画像を設置したところブラウザにて表示されません。
色々試してみたのですが、どうしても表示されずにお手上げ状態です。詳しい方にアドバイス・ご教授いただければ幸いです。
※ちなみに、上記構成にて【subArea】に背景を設定すると問題なく表示されます。
【HTML】
<div id="contents">
<div id="mainArea"> id "mainArea" の内容がここに入ります</div>
<div id="sideArea">
<div class="6support"> 背景画像をおきたい。</div>
</div>
</div>
【CSS】
#contents {
height: 1000px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#mainArea {
float: left;
height: 800px;
width: 700px;
}
#sideArea {
float: right;
height: 800px;
width: 250px;
}
#sideArea .6support {
height: 400px;
width: 240px;
background-repeat: no-repeat;
margin-left: 7px;
background-image: url(images/6supportBack.jpg);
}
一応、原状を「 http://soltsuger.web.fc2.com/test.html 」にアップさせていただいております。参考になればご覧ください。
ご教授よろしくお願いいたします。
お礼
なんと・・・ そんな単純な事が原因だったなんて・・ おっしゃる通り、制作環境はdreamweaverです。 アドバイスいただいた通り、数値をはずしたclass名にしたところ、問題なく表示されました! 本当にありがとうございます。 この単純なところが分からず、1週間近くも悩み続けてしまいました。 分かってしまうと、なんともお恥ずかしい質問をしてしまったことかと、顔から火が出そうです。 そして、 IDの中のクラス表記についてもアドバイスいただき本当にありがとうございます。 ここの記載方法がおかしいのも知識不足で知りませんでした。 私の知識不足の質問に対し、誠意に検証をいただき本当に感謝しております。 この経験を元に、同じ過ちを繰り返さないように精進してまいります。 本当に本当にありがとうございました。