CSS backgroundが反映されません

質問

CSS初心者です。

CSSレイアウトで問題にぶつかりました。
下記CSSをIE6で見るとbodyに書いた
「background-image:url(images/flower.png); 」が反映されません。
IE10では反映されました。

いったい何故でしょうか。。。
調べてみたのですがいまいち分かりませんでした。
よろしくお願いいたします。

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
* {
margin:0;
padding:0;
}

body {
background-image:url(images/flower.png);
background-repeat:no-repeat;
background-position:bottom;
background-attachment:fixed;
background: rgb(#00000); color: rgb(76, 76, 76);
}

body{
text-align:center;
}
div#container {
background-image:url(images/sora.jpg);
background-repeat:no-repeat;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000;
}
div#container{
width: 770px;
margin: 0 auto;
text-align: left;
border: 3px solid rgb(228, 225, 219);
}
.photo{
margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute;
}
.photo2{
margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute;
}
p {
line-height: 2em; font-size: 0.8em;
}
.p1{
font-weight: bold;
letter-spacing: 0.1em;
}
.h1{
text-align: center;
}
h1 span {
display:none;
}
h2 span {
display:none;
}
h3 {
line-height: 1.2em;
padding-top: 2.4em;
padding-bottom: 1em;
font-size: 1em;
font-weight: bold;
}
h3 {
background-image:url(images/h3.png);
background-repeat:no-repeat;
background-position:0px 35px;
padding-right: 40px; padding-left: 30px;
}
h2 {
line-height: 1.3em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 1em;
font-weight: bold;
}
a{
color:#0000ff;
font-style:normal;
text-decoration:underline;
}
a:link {
color: rgb(90, 120, 255);
font-style:normal;
text-decoration:underline;
}
a:visited {
color: rgb(165, 188, 255);
text-decoration:underline;
}
a:hover {
color:#ff0000;
font-style:normal;
text-decoration:underline;
}
acronym {
border-bottom-color: currentColor;
border-bottom-width: medium;
border-bottom-style: none;
}
#intro {
padding: 0px 79px 0px 86px;
}
#participation p {
padding-right: 40px; padding-left: 10px;
}
#intro {
padding-top: 50px;
}
#preamble p {
padding-right: 40px;
padding-left: 15px;
}
#explanation p {
padding-right: 40px;
padding-left: 15px;
}
#preamble {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#explanation {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#participation {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#benefits {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#requirements {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#quickSummary p{
padding-right: 40px; padding-left: 10px;
}
#footer {
text-align: center;
line-height: 1.5em;
padding-top: 10px;
padding-bottom: 40px;
font-size: 0.9em;
}
#footer a:link {
color: rgb(133, 126, 112);
}
#footer a:visited {
color: rgb(133, 126, 112);
}
#footer a:hover {
color: rgb(133, 126, 112);
}
#footer a:active {
color: rgb(133, 126, 112);
}

回答No.2

meah1835 · ベストアンサー

bodyの（他は見ていませんが）
background-attachment:fixed;
「fixed」 はIE6未対応です。

IE6 に対応させるには下記URL下段記事を参考にどうぞ
http://www.css-lecture.com/log/css-beginner/041.html

お礼

なるほど。未対応ということは知りませんでした。ありがとうございました。

回答No.1

ORUKA1951

IE6は無視してください。考慮する必要はありません。

なお、そのように要素ひとつひとつにidやclass名をつけることをしたら駄目です。
div.header div.nav ul li{}
・・headerブロック内のnavブロック内のul要素内のli・・と言う風に、きちんとセレクタを書けば不要なはずです。
　このカスケーディングの仕組みはCSSの命ともいえる仕組みです。

お礼

了解しました。ありがとうございました。