- ベストアンサー
複数指定の背景が表示されない
困っているのでどなたかお力添えをお願いします。 htmlとbodyにそれぞれ別の背景画像を指定しているのですが、 IE6でのみ片方の背景が表示されません。 html { background: url(../images/bg.jpg) repeat center bottom; } body { background: url(../images/header-bg.jpg) repeat-x center top; } どうすれば表示されるようになるでしょうか？ divを使う背景画像の複数指定が上手くいかなかったのでこのやり方をしています。
- gspopo
- お礼率72% (24/33)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE6は無視しましょう。マイクロソフト自身も撲滅キャンペーンを張っているような「腐った牛乳(マイクロソフト)」に対処する必要はありません。 そもそも、サイズの決まっていない要素にtopは兎も角bottomは指定しても意味ありません。 本来は、それぞれの要素に背景を指定すべきです。 例えば <body> <header> </header> <section> </section> <footer> </footer> </body> (注)HTML4などでしたら<div class="header">とかになっているはずです。 html,body{width:100%;margin:0;padding:0;position:relative;} header{background: url(../images/header-bg.jpg) repeat-x center;} footer{position:absolute;bottom:0;background:url(../images/bg.jpg) center;} header,footer{min-height:100px;} [HTML4]用 html,body{width:100%;margin:0;padding:0;position:relative;} div.header{background: url(../images/header-bg.jpg) repeat-x center;} div.footer{position:absolute;bottom:0;background:url(../images/bg.jpg) center;} div.header,div.footer{min-height:100px;} とか・・
その他の回答 (1)
- DrFell
- ベストアンサー率55% (305/551)
過去互換では重複指定はできないです。標準準拠の文書宣言をしてみてもダメですか？ 例 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
関連するQ&A
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
- Firefoxで背景画像が表示されず困っています
サイトを作り確認してみたところ、 IEでは背景画像がきちんと表示されるのですが Firefoxでは表示されないようです。 下記のように入力しているのですが、何が原因なのかわかりません…。 詳しい方、教えていただけないでしょうか。 <!-- BODY { background-image: url(http://aaaaa.jpg); background-color: #ffffff; background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; } -->
- ベストアンサー
- 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
- 背景画像がNetscapeでは表示されない
<HEAD>タグ内に下記の方法で背景画像を中央に表示させています。 IE5.5では正常に表示されますが、ネスケ4.7で確認すると背景画像のみ表示されません。 <BODY>タグ内の文字は正常に表示されます。 どうしたら良いでしょうか？ <STYLE type="text/css"> <!-- table#base { background-image: url("img/bg.jpg"); background-repeat:no-repeat; background-position: center center; } --> </STYLE> 宜しくお願いします。
- ベストアンサー
- HTML
- CSSで複数の背景画像を実装する方法
いまコーディング中なのですが、背景画像がたくさんあるデザインでどうやるか悩んでいます。 添付画像を参照していただきたいのですが、白い背景の下にトップ(赤丸で囲ったオブジェクトが左右に二つあり、グラデーションだけが左右にエンドレスで伸びます。)に固定の背景、センター(青丸で囲った左右のオブジェクトがふたつ)に下方向ににリピートする背景があります。あああああ。。。。となっている部分はフッターで白い背景はフッター部分で切れます。 自分が試した方法です。 html要素に左右に伸びるグラデーションを指定、body要素に赤丸のオブジェクトを指定。これでトップの背景は実装できました。body要素に追加で青丸のオブジェクトも指定してみましたが、画面を上方向にリサイズすると赤丸のオブジェクトの下に重なってしまします。青丸のオブジェクトは白い背景の部分だけでリピートさせ、画面をリサイズしても赤丸オブジェクトに重ならないようにしたいのですが、この場合どのように実装するのが理想でしょうか。よろしくお願いします。 html { background: #F3F0E1 url(../img/share/bg_line.jpg) center top repeat-x; } body { background: url(../img/share/bg_t.jpg) center top no-repeat, url(../img/share/bg_m.jpg) center center repeat-y; } #wrapper { margin:0 auto; width: 960px; background-color:#FFFFFF; }
- ベストアンサー
- CSS
- seesaaブログで背景画像の位置を指定したい
seesaaブログで背景画像の位置を下中央に表示させたいのですが、background-position:bottom center;と指定しても、上中央に固定されていてウンともスンとも動きません。 試しにleftに指定してみたり、タグの順番をかえてみたりしましたがダメでした。 ちなみに、忍者ブログや簡単なHTMLのページでは思い通りに表示できています。 ご存知の方、是非ご教授ください。よろしくお願い致します。 body { margin:0px; padding:0px; background-image:url("画像URL") ; background-color : #210709; background-repeat:no-repeat; background-attachment:fixed; background-position:bottom center; line-height:180%; text-align:center; }
- 締切済み
- CSS
- 上部と下部にx-repeat∞の背景画像を置きたい
html { background-image: url(../images/design_02.jpg); background-repeat: repeat-x; background-position: top; } body { font-family: sans-serif; color: #333333; background-color: #ffffff; background-image: url(../images/design_47.jpg); background-repeat: repeat-x; background-position: bottom; } でcssを組んでいます。 画面一杯に、ヘッダーを含めた上部、フッターを含めた下部にグラデ背景を乗せたデザインにしたいのですが、上記cssでは緩衝しあうのか、bodyで置いた画像しか表示されません。 このようなデザインにしたい場合、どのようなcssにすれば良いのでしょうか。
- ベストアンサー
- CSS
- ディスプレイサイズにあわせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- Visual Basic
- cssについて、レスポンシブな背景指定
背景を指定し表示させる上で、PCだと何の問題無く表示されるのですが スマホ等画面の小さいでスプレイで見た際、背景画像が等倍では見ず来為、 画面サイズに合わせて縮小させたいと考えています、。 現状では、画面の幅が小さくなり、背景画像が等倍のまま表示されてしまいます。 以下の参考のサイトの場合、スマホの画面に合せて背景が縮小されるようなので、方法自体はあるようなのですが、どの様にすれば良いのか解らず、何か良い方法はありませんでしょうか？ http://jquery.shiftbrain.co.jp/ 記述としては以下の様にかいております。 <section id="section_photo" class="common_section"> <div class="content"> <h2><img src="images/tit_01.png" alt="" /></h2> </div> </section> .common_section { width: 100%; } #section_photo { background-attachment: fixed; background-image: url("../images/bg_section_photo.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; } どうぞよろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
- ネットスケープでのスタイルシート指定の背景表示について
以前の他の質問「背景の入れ方http://oshiete1.goo.ne.jp/qa72221.html」である回答者さんが 「{ background-image: url(画像ファイル名) background-repeat: ★ } ※★の部分がrepeat-x（水平方向に１列）、repeat-y（左側・縦方向に１列）、no-repeat（１つだけ表示） 以上３つはとりあえず、問題なく表示されております。 逆に駄目なのはcenter（背景を中央から開始）、top right（右側・縦方向に１列）などです。」 と、center指定だと表示されないと書かれていました。 私もそうだと思ったのですが、コチラのサイト(http://www.asahi.com/ad/clients/korewa-tsukaeru/)では ネットスケープで見ても綺麗に中央に来ていました。CSSもダウンロードして見て見ましたが、 「BACKGROUND: url(images/bg.gif) #f5f5f5 repeat-y center 50%・・・」とcenterを使っていました。 なぜこのサイトがネスケでも綺麗に表示されるのか、ご存知の方お教えください。
- ベストアンサー
- HTML
