• ベストアンサー

HTML作成中:背景の画像をブラウザいっぱいに表示させる方法

FrontPage2000を使ってHPを作っています。背景画像が、ブラウザの横幅の7割くらいしかないため、ブラウザの右端が背景画像の左端で埋められているのです。 つまり、2枚の同一画像が横並びになっていて、1枚目と、2枚目の途中までが表示されているのです。ブラウザの左端に、たとえば「お気に入り」を表示すれば、ぴったりと1枚の画像になります。 1枚の画像を、モニタやブラウザに合わせて拡大して表示してくれるようにするにはどうすれば良いでしょうか? ちなみに、背景画像の設定は以下のとおりです。 <body bgcolor="#FFFFFF" text="#000000" style="background-image:url('bear.jpg');background-attachment:fixed;" >

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

  • ベストアンサー
  • rubyeye
  • ベストアンサー率47% (395/825)
回答No.2

背景画像が、ブラウザの横幅7割しかないサイズでしたら、敷詰めで繰り返し表示にするしかありません。 タグ辞典をひっくり返して見ても、普通の画像のサイズ指定はあっても、背景画像を拡大して配置するというものはありません。 自分で作成した画像であれば、photoshopなどの画像作成加工ソフトを使って拡大することができますが、素材としてフリー配布されているものであれば、そこまでの加工は利用規約で許可はされていないでしょう。 ブラウザの横幅いっぱいになる画像を探して使うか、画像の敷詰めで妥協するかしかありません。

n-kira
質問者

お礼

どうもありがとうございました。やはり不可能だったのですね。すっきりしました。

その他の回答 (1)

  • michan199
  • ベストアンサー率45% (24/53)
回答No.1

拡大表示するのは無理?だと思いますが、繰り返しを指定してあげればいいと思います。 background-repeat:repeat-x; をstyleに追加してみてください。 私はスタイルシートは<head>内に入れていますが…。 <style type="text/css"> body{background-image:url(bear.jpg); background-repeat:repeat-x; background-attachment:fixed; } </style> ↑を<head>内にいれ、bodyタグは <body bgcolor="#FFFFFF" text="#000000"> にしています。

n-kira
質問者

補足

質問にも書いたとおり、繰り返しにはなっています。同一画像が横並びになっていて、1枚と1/3枚が表示されているのです。

関連するQ&A

  • IE以外のブラウザで、背景を固定させる方法

    まったく同じタイトルで、質問されているカタがいらっしゃいましたが、回答を読んでも分からなかったので質問させていただきます。 MS FrontPage 2000でHPを作ったのですが、IEではうまく背景固定がされるのですが、Firefoxでは、背景固定ができず、スクロールすると背景が動きます。 HTMLの部分を見ると、 <body bgcolor="#FFFFFF" text="#000000" background="bear.jpg" bgproperties="fixed" background-attachment:fixed > と言う記述があり、この部分がカギになっているようなのですが、どう変えれば、IEでもFirefoxでも固定されて表示されるのか分かりません。お教えいただけないでしょうか?

  • 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
  • IE以外のブラウザで背景を固定させる方法

    スタイルシートで、ブログのタイトル部分の背景を固定しています。 IE6.0では画像が表示されるのですが、NetscapeやFirefoxでは表示されず、指定してある背景色だけになってしまします。 #title {background: #000 url("画像のURL") no-repeat; background-position:top;background-attachment : fixed;} このように記述していますが、IE以外のブラウザで表示させるにはどのようにすればいいのでしょうか。

  • 背景の表示が出来ません。

    ただいまHPを作成中なんですが、背景が表示されなくて困っています。 右下に背景固定して使いたいのですが・・・どう頑張っても表示されません; <HTML> <HEAD> <TITLE>タイトル</TITLE> <style type="text/css"> <!-- body { background-color: #FFFFFF; background-image : url("haikei.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat ; } --> </style> </HEAD> ココに文章 </BODY> </HTML> と言う風になってるんですが、 友人は間違ってないと言っていますが画像は表示されてないようです。 何かおかしな点とかはありますでしょうか。 自分のパソコン内(アップしないでマイコンピュータで見る)でだと普通に表示されています。 アップすると見れなくなるのです。 何故なのでしょうか (既に色々出ていたみたいですがよく解らなかったので^^;)

  • グラデーション背景と画像固定背景

    こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> (省略) </HEAD>

  • HTMLでの背景画像設定について

    はじめまして。 HP作成初心者なのですが、いろいろとネットで調べながら作成しています。 フレームを使っていて、メニュー画面側のほうに画像をふたつ使いたいと考えています。 それぞれ左上と左下とで固定する画像なのですが、それがどうしてもふたつ同時に表示できません。 <style type="text/css"> <!-- BODY {background-image : url("bg2.jpg");background-position: 100 0%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> <style type="text/css"> <!--BODY {background-image : url("bg.jpg");background-position: 0 100%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> という感じに記述しているのですが、こうすると、下にあるbg.jpgのみが反映されてしまって、bg2.jpgは反映されません。 また、bg2.jpgの上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。

  • HPの背景画像が表示されません

    ホームページNinja9を利用してHPを作成しております。cssを使って背景画像を固定しているのですが、自パソコンから閲覧すると背景画像の固定表示はさていました。しかし最近、他パソコンから閲覧した際その背景画像が全く表示されていないことに気がつきました。当サイトの全てのページにおいて背景が表示されておりませんでした。そのパソコンで閲覧した他サイト様の背景はきちんと表示されていましたので自サイトの問題と認識しております。 しかし、その理由がわからなく困っております。どなたか教えて頂けないでしょうか。 因みに、使用したcssは次の通りです。 <style type="text/css"> <!-- body {background-image : url("◇◆◇.jpg"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat;} --> </style> ◇の部分のファイル位置は確認しましたが正しかったようです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 背景色と画像を同時にのせる

    背景画像を壁紙にし、その画像の上に文字を書きたいのですが、 画像と文字が入り混じって文字が見にくくなってしまいます。 そこで、画像は左右の端だけ残して(左右端合計で画像の幅が画面の40%くらいになるように)、 真ん中の60%くらいに、画像を張る前の白い状態にしたいと思うのですが、HTMLのタグがわかりませんorz タグを教えてほしいです。 よろしくお願いします。 ---------------------------- (画像左端{20%}) (何もない白い背景{60%}) (画像右端{20%}) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) (画像左端) (何もない白い背景) (画像右端) ↑こんな感じです

  • 2つ画像を背景にするスタイルシートってある?

    1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか?下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか? <STYLE TYPE="text/css"> <!--    BODY {       background-image:素材のURL;       background-position:0% 100%;       background-repeat:no-repeat;       background-attachment:fixed;     } --> </STYLE>

    • 締切済み
    • CSS
  • IE6と7で1ピクセル分、背景画像がずれます

    IE6、7で背景画像が横(右)に1ピクセルずれてしまいます。 ブラウザのお気に入りなどの欄を表示する(固定表示)とキッチリ表示されます。 ソースは以下の通りで、特別なことはしていませんが、これはIEのバグなのでしょうか? 他のブラウザはMacも含め問題ありません。 よろしくお願いします。 background: #FFFFFF url(images/bg.jpg) no-repeat fixed center top;

    • ベストアンサー
    • HTML

専門家に質問してみよう