bodyから左右に15pxずつ背景画像をのばしたい

このQ&Aのポイント
  • 質問者は、背景色を#9999ccに設定し、bodyから左右に15pxずつ背景画像をのばしたいと試みているが、Firefoxではうまく表示されていないという問題を抱えている。
  • 現在のCSSの設定は、html要素の背景色を#9999ccに設定し、背景画像を中央に配置し、縦方向に繰り返す設定になっている。
  • 質問者は、どのようにすればbodyから左右に15pxずつ背景画像をのばすことができるのかわからないと困っている。
回答を見る
  • ベストアンサー

bodyから左右に15pxずつ背景画像をのばしたい

cssの基本設定ですが、 背景色をひき、さらにbodyから左右に15pxずつ背景画像をのばしたい という設定を試みていますがうまくいかずご教授いただけたらと思い書き込みさせていただきました。 背景色が #9999cc これを全面に表示し 背景画像を width 800pxで作り下にリピート そしてbodyが width 770pxの #ffffffの白色です。 そして cssで記述して表示してみたところ safaiではきちんと表示されるのですが、firefoxではbodyの幅までしか背景画像が表示されていません。 bodyから左右に15pxずつ背景画像をのばしたいのですが、どうやればよいでしょうか。 現在の状況ですが、 /* ここからcss ------------------------------------ */ *{ color: #333333; font-size: 12px; line-height: 20px; text-decoration: none; margin: 0; padding: 0; word-wrap:break-word; } html { height: 100%; margin: 0px; padding: 0px; background-color: #9999cc; background-image:url(../img/bg.jpg); background-position:center; background-repeat:repeat-y; } body { margin: 0px; padding:0px; color: #333; text-align:center; font-family:"メイリオ",Meiryo,"MS Pゴシック", Osaka, sans-serif; } 本当に困っております。 誰かわかる方がいらっしゃればよろしくおねがいいたします。

  • CSS
  • 回答数1
  • ありがとう数2

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

  • ベストアンサー
回答No.1

おそらく中央に770pxのコンテンツがあり、その左右に15pxのフレームというか区切りがあればいいのですよね? 800pxの画像の上に白い部分を重ねるのではなく、画像自体に中央の白い部分まで一緒に含めて作成しておけば今の指定のままでもいけますよ。

rossi46mail
質問者

お礼

できました!!!!! 本当に感謝しています。 これからもcssがんばって勉強していきたいと思います。 ありがとうございます!!!!!

関連するQ&A

  • HP作成で背景画像が表示されないです・・

    いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとcssを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 - html - <body> <div id="container"> <div id="header">  →背景画像表示されます。  <p>*****</p>  </div> <div id="box"> <div id="left">  →背景画像表示されます。 <p>***** </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>*****</p> </div> </div> <div id="footer"> <p>*****</p> </div> </div> </body> - css - #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }

  • 掲示板の背景が更新すると無くなってしまいます

    今自分の掲示板を持っているのですが、 掲示板に新しい背景を素材として入れたところ、 カスタマイズの際の更新では上手く表示されたのですが、 ページに戻って更新した際に 画像がなくなってしまいます・・。 どこが問題なのでしょうか・・? 全く分からないのでよかったら教えてください・・。 背景画像(紫の険の画像urlはhttp://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpgです) </div> </body> </html> <NOTITLE> <html> <head> <style type="text/css"> <!-- body{ background-color:#FFF; } ul{ } a:link { color:#003366; } a:visited { color:#003366; } a:hover { color:#3399CC;} DL{ font-size:14px; color:#000; } DT{ font-size:14px; color:#000; margin:5px 5px 0; } DD{ font-size:14px; color:#000; margin:5px 0 15px 20px; } H1{ font-size:21px;color:#3399CC; padding:25px 5px 10px; } H2{ font-size:14px;color:#FF9900; padding:3px 5px;margin:0; background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg); background-repeat:repeat-y; background-color:#FFFFDD; border:1px solid #777777; } H3{ font-size:14px;color:#FF9900; padding:3px;margin:0; background-color:#FFF; border:1px solid #777777; } HR.ad { width:100%; height:1px; background:#3091C1; text-align:center; border-width:0px; margin-left:0px; color:#3091C1; } --> </style> </head> <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" style="background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg)background-repeat:repeat-y;width:100%;margin:0;padding:0;"> <div style="background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg);background-repeat;width:100%;height:auto;" align="right">

  • Firefox2.0で背景が上段に集まってしまいます。

    以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "MS Pゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer {     clear: both width: 900px;     background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・(ロールオーバーリンク) </div> <div id="header"> ・・・・・(MPEG画像) </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>

    • 締切済み
    • CSS
  • firefoxでcssを使った時背景画像が表示されない

    CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか? それともそのような仕様なのでしょうか? よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);

  • ホームページの背景画像が途切れてしまう。

    こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像1を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40px×40pxの背景画像2を「repeat」指定しています。 この背景画像2が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの2種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか?? よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------

  • フッタの背景画像をリピートxで左右に伸ばす方法

    フッタの背景画像をリピートxで左右に伸ばす方法について質問します。 色々なサイトを見て検証してみましたが、どのように試してもサイト自体の幅以上、画像が左右に伸びません。 切れてしまいます。 cssを載せますので、どなたかアドバイスをいただけたら嬉しいです。 よろしくお願いします。 ____________________ #footer { background-color:#ffffff; color:#222; height:100px; text-align:center; vertical-align:bottom; padding-top:35px; margin-top:13px; background-image: url(<UserImg>/footer_bg.gif) ; background-repeat: repeat-x; background-position: top; min-width:1025px; overflow:visible; }

    • ベストアンサー
    • CSS
  • div入れ子の背景画像

    【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout">  <div id="menu">メニュー</div>  <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか? 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • CSSのリスト 背景画像が表示されません

    横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }

    • ベストアンサー
    • HTML
  • 背景画像

    背景画像のCSSを教えてください wordpressのfooterのように、footer内のみに縦100px横幅1pxの画像で敷き詰めたいです 実際に横960pxに敷き詰められるようにしたいです #footer_in { position:relative; margin:0 auto; padding:0; width:960px; height:100px; background:url(../images/footer_bg.png) no-repeat center 13px; font-size:12px; } <div id="footer_in"> </div>

    • ベストアンサー
    • CSS
  • 背景画像を二つ指定

    こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 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