背景イメージの重ね表示
- MTを使ってテンプレートを作っている際に、サイドバー全体の背景の上に別な背景を表示させたい場合に困っている。
- IEでは全体の背景が前面に表示され、別な背景が消えてしまう問題がある。
- 解決策を教えてほしい。
- ベストアンサー
背景イメージの重ね表示
こんにちは。 MTを使ってテンプレートを作っているのですが、サイドバー全体の背景の上に、別な背景を表示させようとしています。 例えば以下のようなかんじです。 <style type="text/css"> .bg { background-position: left; background-repeat: repeat-y; background: url("./img/bg.gif"); } .fg { padding-bottom: 100px; background-position: bottom; background-repeat: no-repeat; background-image: url("./img/fg.gif"); } </style> : : <!-- ▼サイドバー▼ --> <div class="bg"> <div class="fg"> : : </div> </div> <!-- ▲サイドバー▲ --> IE だと全体の背景が前面にでてしまい、ホントは前面に表示されて欲しい別な背景が消されてしまい困っています。※Firefox などでは問題ない。 サイドバー全体の背景の上に別な背景を表示させたい場合には、どのようにすればいいのか教えください。 よろしくお願いします。
- ブログ
- 回答数1
- ありがとう数1
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
画像の大きさなんかの細かい情報もあればいいんだけど、 とりあえず適当な画像を中てて試してみた結果以下で正常に表示されました。 bo.gif を 201x108,gf.gif を 165x165 の画像でそれぞれ試しています。 まぁ、細かい数値は適宜でお願いします。 <style type="text/css"> .bg { width:200px;height:100%; background-position: left; background-repeat: repeat-y; background: url("./img/bg.gif"); } .fg { width:200px;height:300px; background-position: 0px 100px; background-repeat: no-repeat; background-image: url("./img/fg.gif"); } </style>
関連するQ&A
- CSSで背景を多重化する方法
CSSでdivの中の背景を多重化したいと思いまして、 なんとかお知恵を拝借できればと思い投稿させていただきました。 やりたいことは、添付の画像のように、テキストの量によって背景の●がちゃんと下に動いて欲しいのです。 こんな感じでできるかなと思って試行錯誤していましたが、ぜんぜんできませんでした。 【html】 <div class="parent"> <div class="bg_upper"> <div class="bg_lower"> <div class="content"> テキスト・・・ </div> </div> </div> </div> 【CSS】 div.parent { position:relative; } div.bg_upper { position:absolute; top:0; left:0; background:url(../images/bg_tl.png) left top no-repeat; } div.bg_lower { position:absolute; bottom:0; right:0; background:url(../images/bg_br.png) right bottom no-repeat; } <div class="content">に対して、height:100pxのように明示的に高さを指定してやるとそれらしくは なったのですが、高さは可変なので使えませんでした。 なんとかヒントいただけましたら助かります。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSで3分割した背景画像を配置したいけど隙間が出来てしまう?
初めて質問させていただきます。 当方はCSS初心者です。 画像(グラデーションのある角丸四角枠)を3分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。
- 締切済み
- HTML
- 上下にイメージをリピートさせたい
よく見ますが、下記サイトの様にtopとbottom(ヘッダーとフッター)にbackground-imageを無限にループするイメージ(カラー) ってcssでどう指定したら出来るのでしょうか。 左右にスペースが出来てしまったりで上手くいきません。 http://www.deviantart.com/ http://www.good.is/ http://www.postbox-inc.com/ ----------------html--------------------- <body> <div id="container"> ・ ・ ・ </div> <div id="footer> </div> </body> ------------------css---------------------- body { background-image: url(img/bg1.gif); background-repeat: repeat-x; } div#footer { background-image: url(img/bg2.gif); background-repeat: repeat-x; } ではだめですよね・・・ なるべくシンプルなソースがいいのですが、 お助けください。
- 締切済み
- CSS
- 複数指定の背景が表示されない
困っているのでどなたかお力添えをお願いします。 htmlとbodyにそれぞれ別の背景画像を指定しているのですが、 IE6でのみ片方の背景が表示されません。 html { background: url(../images/bg.jpg) repeat center bottom; } body { background: url(../images/header-bg.jpg) repeat-x center top; } どうすれば表示されるようになるでしょうか? divを使う背景画像の複数指定が上手くいかなかったのでこのやり方をしています。
- ベストアンサー
- HTML
- 背景画像の指定方法
少し調べたのですが、さっぱり原因が分からない為質問させていただきます。 外部CSSで背景画像を指定しているのですが、WinXP IE7で作製した所うまくいったのですが、別のマシン(WinXP IE6)で見ると表示の仕方が変わってきます。 参考ソース▼ 【外部CSS】----- .bg { width:300px; background-image:url(bg.png); background-repeat:no-repeat; background-attachment:fixed; background-position: bottom;} 【HTML】----- <div class="bg">長い本文</div> IE7だと、開いているウィンドウサイズに合わせて、見ている画面範囲の下部に背景画像が来るのですが、IE6の方だと、長い本文をスクロールしていった最後に、背景画像が表示される状態です。 分かりにくい説明かもしれませんが、アドバイスよろしくお願い致します。
- 締切済み
- HTML
- ネスケで背景色が表示されない
WINXP IE6 ネスケ7.1 外部cssで td.bottom{ height: 30px; background:url(img/cr.gif); background-repeat:no-repeat; background-position: center; background-color: #fff76b; } と指定し、 HTMLに <TD colspan="4" align="center" class="bottom"></TD> というタグを書いています。 IEで見るとちゃんと表示されますが、 ネスケだと色がまったく表示されません。 理由がまったく分からず困っております。 どなたかアドバイス下さい!
- ベストアンサー
- HTML
- WindowsのFirefoxでの背景画像の表示(CSS)
WindowsのFirefox(Ver.2.0.0.12)での背景画像の表示について質問です。 下記の様なCSSで、下寄せでX方向に画像を並べ、グラデーションで背景色と馴染むようなデザインにしたいのですが、背景色しか表示されません。 他のブラウザでは上手くいくのですが、原因がわかりません。 Dreamweaverで作っております。 body { background-image: url(img/site/bg.jpg); background-repeat: repeat-x; background-position:bottom; background-color: #826243; } どなたかご教授いただけませんでしょうか。 宜しくお願いいたします。
- ベストアンサー
- CSS
- ブロック要素の右下寄せ
添付されている画像のように、Aブロック要素内の右下にBブロック要素を配置したいです。 下記の記述だとFFではきちん表示されるのですが、IEでは表示すらされません。 どうしたらよいでしょうか? *htmlの記述 <div id="box-a"> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div id="box-b"> <p>内容</p> </div> </div> *CSS #box-a{ margin:0; padding:50px 0; position:relative; background-image:url(../img/box-a.gif); background-repeat:no-repeat; background-position:left bottom; } #box-c{ margin:20px 120px 0px 200px; padding:10px; background-image:url(../img/box-c.gif); background-repeat:no-repeat; } #box-b{ position:absolute; right:0; bottom:0; margin:0; padding:0; width:150px; height:150px; background-image:url(../img/box-b.gif); background-repeat:no-repeat; }
- ベストアンサー
- CSS
- 背景画像にロゴを重ねる方法を教えてください。
CSSで背景画像にロゴを重ねる方法を教えてください。 現在、 htmlが以下の状態 <div class="dz_headbar"> <a href="test.html" target="_blank"><img src="title.gif" alt="ロゴ" " style="border:0"></a> </div> cssが以下の状態です。 .dz_headbar { background-image: url("3gradation.png"); background-position: left top; background-repeat: repeat-x; padding-top: 50px; } ヘッダー背景の3gradation.pngの上にロゴ画像であるtitle.gifを重ねたいのですがどうもうまくいきません。 ご教授いただける方何卒宜しくお願いします。
- ベストアンサー
- HTML
- リストタグでのナビゲーションボタンで、背景画像が表示されません。
winIE6では正常に表示されるのですが、 safariだとまったくcssが無視され、横並びにもならない始末です(^_^;) どなたかご教授お願いいたします。 ■html <div id="header"> <ul id="headerMenu"> <li id="home"><a href="index.html">ホーム</a></li> <li id="sitemap"><a href="sitemap.html">サイトマップ</a></li> <li id="recruit"><a href="recruit.html">リクルート</a></li> <li id="contact"><a href="contact.html">お問合せ</a></li> </ul> </div> ■css #header { width:100%; height:107px; margin:0px; padding:0px; position: relative; font-size:12px; background:url("img/top.gif") no-repeat; } #headerMenu{ list-style-type:none; padding:0px; margin:6px 0px 0px 532px; } #headerMenu li { display:inline; padding:0; margin:0px; float:left; } #headerMenu a { display:block; text-decoration:none; text-indent:-5000px; height:25px; } #home { display:block; background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; width:63px; background-position:0px 0px; } #home a:hover { background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; background-position:0px -25px; } #sitemap { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; width:90px; background-position:0px 0px; } #sitemap a:hover { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; background-position:0px -25px; } #recruit { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #recruit a:hover { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; background-position:0px -25px; } #contact { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #contact a:hover { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; background-position:0px -25px; }
- 締切済み
- CSS
お礼
さっそくの回答ありがとうございます。 width:100%; と指定したら IE でも表示されるようになりました。 Firefox では表示されて IE で表示されなかったので、またかぁ…なんて思っていたのですが、サイズを指定すれば良かったんですね。 ありがとうございました。