スタイルシートで背景画像を固定のまま最前面へ

解決済

質問者：master-3rd
質問日時：2006/07/26 15:46
回答数：4件

フレームで割ったページを作ろうとしています。
上フレームにロゴなどがあり、下フレームにはみ出すようにデザインしました。
もちろん、下フレームはスクロールするので、background-positionで上に固定リピート無しとしました。
ただ、この状態だと、ロゴの上にコンテンツがきてしまいますよね。
どうにかして、ロゴの下にコンテンツが来るようにできないでしょうか?(ロゴの下にもぐりこむ感じ)

無理なら無理でOKです。「できません」と回答をください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： noname#19175
回答日時：2006/07/27 06:20

> 上フレームにロゴなどがあり、下フレームにはみ出すようにデザインしました。

状況がよくわかりませんが、<frameset>ならフレームを超えることはないはずなのですが、、、
たとえば高さ100pxのロゴマークを表示するのに、
上80pxを上フレームに、
下20pxを下フレームのbackground-imageに指定している、、ということでしょうか？

コンテンツがロゴマークに隠れるなら、結局、全部上フレームにしているのと同じ事だと思うのですが、、、
上フレームに記述するのではダメなのでしょうか？

> (ロゴの下にもぐりこむ感じ)
position:fixedを使えば簡単なのですがIEが対応していないと言うことで、
通常はJavaScriptを使わないと行けないのですが、
DOCTYPEを記述しなくても良いなら、以下のスタイルで作れます。
（未検証ですが、こんな感じだったと思います。FirefoxやSafariで表示位置がずれるかも、、、）
<BODY>にmarginやpaddingを0px以外に指定すると、スクロールバーの位置が妙なことになるので、0pxにした方が良いです。

.title{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100px;
text-align:center;
z-Index:2;
}
.contents{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-Index:1;
padding-top: 100px;
}

<body>
<div class="title">
<img src="title.jpg" alt="タイトル＆ロゴマーク">
</div>
<div class="contents">
本文
</div>
</body>