• ベストアンサー

背景画像がずれる現象について

フッターの背景をCSSで指定してrepeat-xで横並びに表示したのですが、 上のほうにずれて表示されてしまいます。 フッターの文字だけは、一番下の場所に表示されるのに対して、 背景画像だけが上に表示されるのはなぜでしょうか? よろしくお願いします。

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • dscripty
  • ベストアンサー率51% (166/325)
回答No.2

html と css のソースをみてないから、想像だけど、 background-posision: をかいてない? http://www.w3.org/TR/CSS2/colors.html もしそうなら、 background-position: bottom; か background-position: bottom left; のどちらかでうまくいくとおもうよ。

sasaki027
質問者

お礼

参考になりました。 回答ありがとうございます。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

該当部分のHTMLとCSSがないと、それだけではわかりません。 14.2 背景(The background) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/colors.html#q2 )

sasaki027
質問者

お礼

参考になりました。 回答ありがとうございます。

関連するQ&A

  • 背景画像を2枚使いうまく繰り返す方法

    htmlとcssでホームページを作っています。 背景画像を2枚使用しているんですが、どうしてもうまく表示されません。 1枚目はページ上部に。 2枚目はその下からすべて。 で、それぞれ横にリピート。 2枚目だけ縦にリピートして表示させようとしてます。 最初はbodyとdivで -------------------css-------------------------- body { background-image:url(""); background-repeat:repeat; } div.body { background-image:url(""); } ----------------html-------- <body> <div class="body"> 内容 </div> </body> --------------------------------------------- としています。 ですが、これだとdivのボックスができてしまい、横に無限に繰り返されないことになります。画面を縮小した時に切れてしまいます。 なので、htmlとbodyにそれぞれ背景をつけたんですが、 今度は両方の画像が表示されませんでした。 html { background-image:url(""); background-repeat:repeat-x; } body { background-image:url(""); } htmlのほうを消すと、bodyで指定した画像が縦横無限に繰り返されます。 htmlを消さずにbodyを無限に表示されるにはどうしたらいいですか?

    • ベストアンサー
    • HTML
  • ページがスクロールするのについてくる背景画像

    わからなくて困っています。 どなたか分かる方教えてください。 トップページのトピックス部分をインラインフレームで表示させる作りにしました。 インラインフレームの表示部分は310*200です。 表示させる部分なので、トピックスの背景も310*200で作ってcssで固定させました。 表面的にはOKなのですが、ページをスクロールすると背景画像が見えなくなってしまいます。 background-repeat: no-repeat; にしてあるのですが、repeatにできない画像なので、困っています。 ページをスクロールするとついてくる背景画像にしたいのですが、どうすればできますか? cssかjavaでできるでしょうか? 教えてください。 よろしくお願いします。

  • 背景画像

    背景画像の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
  • css:背景の縦長グラデーション画像がブラウザの高さによって伸び縮み?

    http://www.cyberagent.co.jp/index.html このサイトのように、グラデーションのかかった背景画像を使用する場合についてお願いします。 例えばこのサイトだと、「画像がブラウザの高さに合わせて縦に伸びている」と…見えるのですが、実際はどうなっているのでしょうか? 自分で、グラデーション画像を作って background: url(back.jpg) repeat-x (もしくはno-repeat)のように指定しても、 元画像back.jpgの高さにしかならず、フッターあたりは空いてしまって白地になるのですが。。 (画像の高さが600pxで、ブラウザが800pxだったら、下に200px空いてしまうということ) 何か指定すべきプロパティなどあれば教えてください!

    • ベストアンサー
    • HTML
  • Dreamweaver CS3で背景画像が表示されません

    セールスレター(ホームページ)の背景に画像を使いたいので CSSの「body」から背景→背景イメージの欄に使用したい画像を設定しています。 理想はグラデーション画像なのですが、 どんな画像を入れても表示されません。 (グラデーションでないものも、ファイルサイズ等に関係なく表示されません) jpg画像で同じフォルダ内に入っています。 背景色は問題なく表示されます。 ホームページ内の背景でない部分はdivで囲み影画像を背景にしてあります。 (幅680px,高さ指定なし マージン:左右自動、上下0 影の画像をY軸にリピート) body:(幅高さ指定なし、マージン上0、背景に入れたい画像) ページプロパティから背景画像を指定した場合は表示されますが、 ページのTOPのみグラデーションのある画像にしたいため リピートするとグラデーションが何度も繰り返されてしまいます。 そのため「固定」を使うためにCSSを使用しなければならないと思い CSSで表示する方法を探しております。 初心者なので何か初歩的なミスをしているかもしれません。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • 背景画像を2枚表示したい

    こんにちは、お世話になります。 タイトルにある通りなのですが、背景の画像を2枚表示させたいのです。 現在1枚表示しているものはSCCで指定してあり、リピートはなしなのですが、 もうひとつ表示したい背景画像はリピート表示、ポジション指定をさせたいです。 ちなみにスクロールさせても背景が重なる事はありません。 ブラウザはIE6.0を使っています。 宜しくお願い致します。

  • CSSで「html」にも背景指定をするのはどのような場合?

    CSSで「html」にも背景指定をするのはどのような場合? CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか? もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる?と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。

    • ベストアンサー
    • 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
  • 背景画像だけをはみ出して表示させたい。

    CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい!!</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。

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

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

専門家に質問してみよう