ベストアンサー

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

2006/07/26 15:46

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

master-3rd
お礼率39% (524/1325)

CSS
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#19175

2006/07/27 06:20 回答No.3

> 上フレームにロゴなどがあり、下フレームにはみ出すようにデザインしました。状況がよくわかりませんが、<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>

質問者