本当に困っています。html/cssについて。
html/cssについて。画像が表示されません。
html/cssを手打ちしてコーディングしています。
一部の画像がどうしても表示されず、困っています。
まず、背景画像はJavaScriptで５枚の画像からランダムで表示。
次に帯状のヘッダ画像(top_header.gif)を最上部に横方向にリピートして表示。
同じくフッダ画像(top_footer.gif)を最下部に横方向にリピートして表示。
そして左上にホームボタン画像(TOP_s1.gif)を配置。
次が問題になっている箇所です。
ボタン画像(button_r1_c1_s1.gif[width 136px heignt 36px])を上から0px,右から500pxの位置
に、ブラウザの大きさに関わらず常に表示される(fixed)ようにしたいのですが、
画像が表示されなくなります。ちなみに透明のままですが、ブラウザで確認するとタブの遷移はできます。
これもちなみにですが、上から0px,右からも0pxの位置に指定すると表示されます。
右から0pxだと表示されるが、それ以外だと表示されません。他の画像が邪魔しているのなのか、原因がわかりません。
同様にフッダ画像(top_footer.gif[width 1681px height 42px])も表示されていません。
これはheightを1000pxくらいで指定すれば、なぜか表示されるのですが、邪道な気がしています。
どなたかボタン画像(button_r1_c1_s1.gif)とフッダ画像(top_footer.gif)の表示方法をご指導願います。
よろしくお願いします。
【html】
<body>
<SCRIPT language="JavaScript">
bgc = new Array();
bgc[0] = "url(../image/bg1.jpg)";
bgc[1] = "url(../image/bg2.jpg)";
bgc[2] = "url(../image/bg3.jpg)";
bgc[3] = "url(../image/bg4.jpg)";
bgc[4] = "url(../image/bg5.jpg)";
n = Math.floor(Math.random()*bgc.length);
document.body.style.backgroundImage = bgc[n]
</SCRIPT>
<div id="container">
<div id="top_header"></div>
<div id="top_footer"></div>
<div id="TOP_s1"><a href="#"></a></div>
<div id="News"><a href="#"></a></div>
</div>
</body>
【CSS】
@charset "utf-8";
/* CSS Document */
body{
padding-top: 0;
padding-right: 0;
padding-left: 0;
margin-top: 0;
margin-right: 0;
margin-left: 0;
overflow-y: hidden;
overflow-x: hidden;
}
#container{
height:100%;
width:100%;
}
#top_header{
background-image: url("../image/top_header.gif");
height: 34px;
background-position: left top;
background-repeat: repeat-x;
background-attachment: scroll;
z-index: 1;
}
#top_footer{ <!-- 問題箇所２ -->
background-image: url("../image/top_footer.gif");
height: 42px; <!-- 1000pxくらに表示すると表示される -->
bottom: 0;
background-position: left bottom;
background-repeat: repeat-x;
background-attachment:fixed;
z-index: 2;
}
#TOP_s1 a {
background-image: url("../image/TOP_s1.gif");
height: 194px;
width:332px;
background-position: left top;
background-repeat:no-repeat;
background-attachment: scroll;
position:absolute; z-index: 3; top:0; left: 0;
}
#TOP_s1 a:hover {
background-image: url("../image/TOP_s2.gif");
}
#News a { <!-- 問題箇所１ -->
background-image: url("../image/button_r1_c1_s1.gif");
height: 136px;
width:36px;
background-position: right top;
background-repeat:no-repeat;
background-attachment: fixed;
position:absolute; z-index: 3; top:0px; right: 500px; <!-- 500pxを0にすればなぜか表示されます -->
}
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
リンク先のサンプル見てみました。 これですこれです！ 試してみます、ありがとう！