スクロールバーに画像更に背景固定の場合

[新着] Webテンプレートを仮オープンしました



0   名前:  : 2006/02/14 11:20  [URL
スクロールバーに画像をいれたのですが、
更にページ背景を固定したいのです。

URLのソースを見ていただくと解るように
何箇所かに背景固定タグを いれてみました。
各1箇所にしても出来ません・・

スクロールバー用にbackgroundを決めて、
<div style="background:url(URL)" background-attachment: fixed;>
で無理やり呼び出しているので、
やっぱり両立は無理なのでしょうか(ノД・)

他に何かいい方法知ってる方いましたら 教えてくれると幸いです。

1   名前: あわよ : 2006/02/14 11:20
こうゆうことですかね。
すごく自身がないですが。。。

中のテーブルは様子みる為だけなので適当です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
body{
background-attachment:fixed;
background-color:#447748;
background-image:url(http://www.geocities.jp/arajiru2000/TEXTrightBG.gif);
scrollbar-3dlight-color#c0c1c2;
scrollbar-arrow-color:black;
scrollbar-darkshadow-color:#c0c1c2;
scrollbar-face-color:#c0c1c2;
scrollbar-highlight-color:#c0c1c2;
scrollbar-shadow-color:#c0c1c2;
scrollbar-track-color:#447748;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
}
.imgscroll{
filter:chroma(color=#c0c1c2);
}
-->
</style>
<title></title>
</head>
<body scroll="no">
<div class="imgscroll" style="width:100%;height:100%;overflow:auto;background-color:#c0c1c2">
<table border="1" align="center" summary="">
<tr>
<td width="162">a</td>
</tr>
<tr>
<td height="195">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
<tr>
<td height="176">a</td>
</tr>
<tr>
<td height="50">aaa</td>
</tr>
<tr>
<td height="250">a</td>
</tr>
</table>
</div>
</body>
</html>

2   名前:  : 2006/02/14 11:20
Σ( ̄▽ ̄;Aすごい
横スクロールバーにも画像がw
どこを変えたのかちょっと解らないですが、
いじっている間に理解していけるかも。。

本当にありがとうございました。><。

3   名前: 匿名希望 : 2006/02/14 11:20
OperaやFirefoxで見ると愉快なことになる、ということをお忘れなく

4   名前: あわよ : 2006/02/14 11:20
見直したら、必要でない記述がありましたので
修正させていただきました。

filter:はIE独自仕様なので、匿名希望さんのおっしゃる通り
愉快なことになりますね。

あとは、ページ全体が重くなります。
さらに画像をいっぱい貼ると重くなると思います。


*一応の解説*

『変更前』
serif;background-attachment:fixed;
background-position:right;
background-image:url(http://www.geocities.jp/arajiru2000/sb10.gif);
background-repeat:repeat-y;
陸さんのこの部分↑スクロールバーの設定の部分を変えて


『変更後』

↓ページ全体のBODYに反映させたやり方にしてみました。
background-attachment:fixed;
background-color:#447748;
background-image:url(http://www.geocities.jp/arajiru2000/TEXTrightBG.gif);

背景画像をスクロールバー用、ページの背景用と分けず、
ページの背景用の画像でスクロールバーの画像も出してしまおうと。


陸さんの、スクロールバー設定の時に
background-position:right;
background-repeat:repeat-y;
background-image:url(http://www.geocities.jp/arajiru2000/sb10.gif);
となっていて、スクロールバーの部分にしか画像が来ないようにしてあったのを
単純にページ全体にその画像を反映させれば良いだけですよね?

なので
background-position:right;
background-repeat:repeat-y;
この部分を取り去り、背景をこちらの画像にしてみました。
background-image:url(http://www.geocities.jp/arajiru2000/TEXTrightBG.gif);

以上です。

こういうことができることを、私も今回始めて知ったので
とても良い勉強になりました。

5   名前:  : 2006/02/14 11:20
あわよさん匿名希望さん本当にどうもありがとうございました。

とっても詳しくて助かります。

そうですよね、憶測でしたがスクルールバーに「だけ」
背景を反映させるためのタグが わざわざどこかに隠れていると
感じておりました。

なんだかいろいろいじっていたら、
バーのための画像はなくなり、
背景用の画像がバーに行った現象がおきたので、
うっすら気づいていました。

しかし、理屈がどうしても知りたかったので本当に助かります。

ただ、背景画像を固定させたい場合は
バーには別の画像を使えないことも勉強になりました。

本当にありがとうございました。

一覧へ戻る