• ベストアンサー

ブログの背景画像が崩れます。

ブログのテンプレートにCSSで左上・右下と、背景画像を2枚固定しました。 しかし全画面表示の時には問題ないのですがブラウザの大きさを変えると背景画像も一緒に動いてしまい画像が重なり合ってとても見づらくなってしまいます。 ブラウザが小さくなったら、下部に横スクロールを出して背景、コンテンツを固定したままにしたいのですがどうすればいいのでしょうか。 うまく説明出来なくて申し訳ありません。 宜しくお願い致します。

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

  • ベストアンサー
  • axuaxua
  • ベストアンサー率36% (82/223)
回答No.1

重なるという事は背景画像を囲むboxにwidthを設定しない為だと思います。 bodyかbody直下の<div id="">と書かれたクラスやIDに二つの画像を表示するのに最低限必要なwidthを割り当ててください。

matsukotaro
質問者

お礼

お礼が大変遅くなってしまい、申し訳ございません。 無事、出来ました。 有難うございました!

その他の回答 (1)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

固定するなら#1さんの通り、width:○○○px 最小設定をしたければ(IE6不可) min-width:○○○px; min-height:○○○px; つまり、ブラウザの 幅や高さを縮めても表示領域はスクロールバーなので、狭くならないって事です。

matsukotaro
質問者

お礼

お礼が大変遅くなってしまい、申し訳ございません。 無事、出来ました。 有難うございました!

関連するQ&A

  • スクロールで背景画像が隠れてしまう

    CSSを始めたばかりの初心者です。 フレームでメニューを表示させています。 CSSで背景画像を固定にしているのですが、 長いメニューでスクロールが出て来ると、 ブラウザの表示領域外にあったテキストの背景が白く表示され、 そこから下の背景は画像も見えず真っ白になってしまいます。 ブラウザを引っ張ると背景画像もまた出てくるのですが… これは一体どうしたらいいのでしょう? お答え頂けたら嬉しいです。

  • ブログタイトルの背景に画像設定 (FC2)

    FC2ブログの共有テンプレートからDW99さんの[aqua_3cpl] (http://preview.blog22.fc2.com/?style3=2111&index)をダウンロードしました。 このテンプレートでブログタイトルの背景に画像を設定したいと思いました。 そこで、スタイルシートに、「カスタマイズ・マニュアル」を参考にして、以下を挿入してみましたが、ブログを確認しても画像は表示されませんでした。 (画像パスには、画像のURLを入れています) 初心者にも分かるように、背景画像の設定方法を教えて下さい。 ↓これをスタイルシートに挿入してみましたが… /* ブログタイトル */ .header { background-image : url("画像のパス"); /* 背景画像の設定 */ background-repeat : repeat; /* 背景画像を横縦タイル状に並べる */ background-position : left top; /* 開始位置を画面左上に設定 */ background-attachment : fixed; /* 背景画像の位置を固定 */ }

  • 背景画像の位置固定

    背景画像~画像固定と位置固定  過去ログにも似たような質問で、背景画像の固定がありました。 <BODY BACKGROUND="./img/back.gif" BGPROPERTIES=FIXED> ☆これと同時にブラウザの表示画面で、右下や左上といった 背景画像の位置まで固定させる方法とはあるのでしょうか? このとき、画像は並べて表示するのではなく、一つ だけ表示したいんです。サイズは400×400pix.です。  どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • ブログの背景画像のサイズを固定したいです

    宜しくお願いします。 ブログの背景画像を変更したく、一枚の写真(フリー素材です)を使用しブログの背景に設定したのですが、スマートフォンの所謂PC表示にすると画像が拡大してしまいぼやけた状態になってしまいます。 デスクトップ、ラップトップPCのブラウザですと普通に表示されます。 スマホ用PCブラウザではなぜか画像が異常に引き伸ばされてしまうのです。 CSSではライブドアブログのかんたん背景画像という機能を使用しており、 /* かんたん背景画像 */ body.show-bg-image { background-attachment: fixed; background-repeat: no-repeat; background-size: cover; のように設定されています。 スマートフォン用のPCブラウザからでもデスクトップPCブラウザで見たときのように画像を固定(一枚絵)し、サイズもスマートフォン向けPCブラウザで見たときに適合するようにしたいのですが方法が分かりません。 自分でも色々調べ、リピートの設定やスクロール、コンテイン等をいじってみましたが素人知識ではまったく改善されず困っております。 お詳しい方是非ご教授、お力添えを頂きたく存じます。 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • FC2ブログで背景画像を任意の位置に貼れない

    FC2ブログでオリジナルのテンプレートを作成しています。 CSSにて、背景画像を設定しようとしていますが、 配置設定がどうしてもうまくいきません。 画像を右下に配置させられるよう、 以下のように設定しました。 template.cssココカラ----------------------------------------------------- body { background : transparent url("http://blog-imgs-画像のURL") bottom right no-repeat; background-attachment:fixed; } template.cssココマデ----------------------------------------------------- 自分のパソコン上に作ったHTML・CSSでは、右下に配置してくれましたが、 FC2ブログのテンプレートに設定・反映したところ、 右上に配置されてしまいました。 InternetExproler9、GoogleChrome、FireFox3.6で動作を確認したところ、 正常に配置してくれたのはFireFoxだけでした。 この他に、background-positionで配置場所を個別に設定するなどしましたが、 どうしてもうまくいきませんでした。 ご助言をいただけますようお願いします。

    • ベストアンサー
    • CSS
  • Dreamweaberでの背景画像固定について

    よくこちらにも質問にあがってる「背景画像」の固定ですが、回答を拝見していると、手打ちタグでの回答ばかりですよね? 同じタグをDreamweaberで手打ち挿入してみましたが、背景固定は出来ませんでした。 (右下・左上等全部やってみましたが、どれも出来ませんでした) 画面をスクロールすると文字と一緒に画像も動いてしまいます。 手打ち挿入でなく、Dreamweaberのソフト上では出来ないものなのでしょうか? 詳しい方いらっしゃいましたら回答お願いいたします。 こちらの環境はi Mac/OS.9.2.2です。

    • ベストアンサー
    • HTML
  • gooの背景について。

    gooのブログでテンプレートは【シンプル】です。 背景を固定した状態で本文をスクロールしたいのですが、可能ですか? もし出来るのであれば方法を教えてください。 また固定背景にした場合、重くなるような事はありますか? ちなみに背景はオリジナルで左上の隅にワンポイントのような形で表示させている状態です。 よろしく御願いします。

  • ブログのバナーの背景に2つ画像を入れたい

    seesaaブログで小粋空間さんのテンプレートを使用しています。リキッドレイアウトです。 バナーの部分に背景となる画像をCSSで指定しています。 そしてバナーの左端にはブログのタイトルと説明があります。 ここからが質問なのですが、右端にバナーと同じ高さの画像を配置したいのですが どのような方法があるでしょうか?背景画像を二つ指定して重ねることなんて出来るのでしょうか? もしくはバナーを左右で二つに区切ったりしなければいけないのでしょうか? ご教授よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSで背景に2枚の壁紙を配置

    CSSを利用して背景を設置し、左上などに固定で表示する方法はわかりました。 これを利用して、左上に1枚右下に1枚と言うことは出来ませんか? 画面の幅・高さが変わっても対角線にちゃんと表示できるようにしたいです。 CSS以外でも何か方法があれば教えてください。

    • ベストアンサー
    • HTML
  • ブログ背景について

    ブログ背景について こんにちは。初めて投稿するtyobiwaです。 先日gooブログを開設しました。 まだ手をつけていません。 そこで先程素材屋さんからお借りした物を使って背景を変えたいのですがやり方がさっぱりです。 何とかテンプレート編集まで行き・・・そこからが問題です。 CSSデータというページに画像のURLを入力というのでいいのでしょうか? またURL入力場所も分からなくて困っています。 どなたか教えていただけませんか?