CSSで背景画像を一番下にもってきたいのですが・・・

依頼されたページを作成中ですが、
bodyに指定したbackground画像を一番下にもってくるにはどうしたら良いか分からず、困っております。

#loginの背景に指定した「top_haikei.jpg」は、
position: fixed ; bottom:0;
と指定することで一番下にもってくることに成功しましたが、
bodyの背景に指定している「haikei_bottom.gif」を一番下に持ってくる方法が分かりません。

CSS初心者の為、詳細にご教示頂ける方のご回答をお待ちしております！
よろしくお願い致しますm(u_u)m

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■CSS
*{
margin:0px;
padding:0px;
}

html {
scrollbar-face-color: #F5E1D8;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color:#F5E1D8;
scrollbar-3dlight-color: #F5E1D8;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}

body {
margin:0 auto 0;
background-color: #FFFFFF;
font-family:sans-serif;
font-size:8pt;
background-image: url(../img/haikei_bottom.gif);
background-repeat: repeat-x;
background-position: center bottom;
}

form {
margin:0px;
scrollbar-face-color: #F5E1D8;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color:#F5E1D8;
scrollbar-3dlight-color: #F5E1D8;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}

input {
font-size:12px;
}

#container {
width:950px;
margin:0 auto 0;
background-color:#FFFFFF;
}

#logo{
margin-left:80px;
height:180px;
}

#box1{
text-align:center;
line-height:20px;
height:150px;
}

#login{
height:250px;
background-image: url(../img/top_haikei.jpg);
background-repeat: no-repeat;
background-position: center bottom;
position: fixed ; bottom:0;
}

#login_left{
float:left;
margin-top:120px;
margin-right:50px;
line-height:20px;
width:700px;
}

#login_right{
float:left;
margin-top:100px;
width:200px;
}

No.1 回答者： yyr446 回答日時： 2009/11/06 21:47

同じように

position: fixed ; bottom:0;
で下にいくだろうが、background-repeat: repeat-x;
とリピートさせてるのは、なぜだ？
bottomに持っていくとtop_haikei.jpgとかぶってしまうではないか！
z-index上げると、top_haikei.jpgが見えなくなるぞ、もしや透明背景？

この回答への補足

yyr446 様


リピートさせているのは、haikei_bottom.gifが縦長の画像だからです。
おっしゃる通り、position: fixed ; bottom:0;で下に持っていくだけなら出来ますが、それだとtop_haikei.jpgで見えなくなってしまうので、リピートさせ、かつ一番下に持っていきたいのです。

見当違いのことを言っていたらごめんなさい。

それと、見えなくなるのはtop_haikei.jpgではなく、haikei_bottom.gifの方では？？

もう少し詳しくご説明頂けると有り難いです。

補足日時：2009/11/06 22:56

この回答へのお礼

body部分のCSSを下記に書き換えたら上手く行きました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
body {
margin:0 auto 0;
background-color: #FFFFFF;
font-family:sans-serif;
font-size:8pt;
background-image: url(../img/haikei_bottom.gif);
background-attachment:fixed;
background-repeat: repeat-x;
background-position: bottom;
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

background-attachment:fixed;が必要だったようです。
ありがとうございました！

お礼日時：2009/11/07 11:03