- 締切済み
CSSで背景の重なり指定
ページの背景を設定するために body { background: #000000 url(../img/back1.jpg) no-repeat right top; z-index:2; } とし部分的に表示したい背景を .side { background: #000000 url(../img/back2.jpg) repeat; z-index:1; } としています。 やりたいことはbodyで記述した背景を1番前に表示させたいと 思っているのですが.sideに記述した背景が手前に 出てきてしまいます。 これを解決する方法はないでしょうか？ブラウザはIE6.0です。
- HTML
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは やり方を厭わないのであれば・・・ <style type="text/css"> <!-- body { background: #000000; } #back { position:absolute; right:0px; top:0px; } .side { background: #000000 url(../img/back2.jpg) repeat; } //--> </style> <img src="../img/back1.jpg" id="back"> <div class="side"><br><br><br><br><br></div> こんな感じでできると思いますけど？ <img・・・>は何処においてもいいですので（＾＾） あとは位置調整でright topのpx数を変えてやればいいかと思います
- golive001
- ベストアンサー率54% (20/37)
#2です。 全く同じにレイアウトするのは可能か？とのご質問ですが、 基本的には難しいと考えていた方が良いと思います。javascriptでも同様で、ブラウザ間の差異を吸収してあげる工夫が必要な状況です。 一番簡単なものとしては、 *{ margin:0; padding:0; } などがあります。 IE(マイクロソフト)は、W3Cの勧告に従わないことが多く、デザイナーが右往左往しているんじゃないでしょうか。 ”独自”拡張などにはくれぐれも気を付けて実装するようにしましょう。 実装する場合は、その見せ方がＭｕｓｔにならないようにしなければなりません。
- golive001
- ベストアンサー率54% (20/37)
それやったことあるんですが、どうもうまくいかないみたいですね。 body要素はside Classで指定した要素を内包していますからね。 つまり要素として親子関係にあるのが問題なのではないしょうか？ 例えば <body> <div class="side"></div> <div class="main"></div> </body> side と main の関係のように兄弟関係にあるものならうまくいくんでしょうけどね・・・。 サイトとして作る以上、IE6のみに対応できれば言い訳じゃないでしょうし、実際Firefoxでの実行結果ともずれが出るようです。 表示させたい背景を兄弟関係になるように、配置する以外やり方はないんじゃないでしょうか・・・。 もし、他にやり方があるようなら、私も知りたいです。 お力になれず、すみません。
- glphon
- ベストアンサー率26% (41/152)
bodyの背景をトップに・・・という意図があまりよく分かりませんが… z-indexは数字が浅いほうが上に来ます。
補足
そうなんです・・・Firefoxでみるとひどいもので（＾＾； まだcssを始めたばかりでブラウザによって見え方が違うなど cssはhtml以上にかなり難しそうですね。 どのブラウザでみても同じ見え方をすることは可能なのでしょうか？