• ベストアンサー

HTML背景画像

HTMLタグ内にbackground = "image.jpg"と記述すると画像が小さい場合 ページの下のほうできれます。 ウィンドウの大きさに合わせて大きくしたいです。 何か方法はないでしょうか。 教えてください。よろしくお願いします。

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

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

  • ベストアンサー
  • suzuko
  • ベストアンサー率38% (1112/2922)
回答No.2

>ウィンドウの大きさに合わせて大きくしたいです。 窓いっぱいに背景をフル画面にしたいと言うことでしょうか? 縦横の比率が、窓や画面の大きさで変わるので難しいのでは? 簡単なのは背景画像伸した部分と同じ色に background-colorを指定することでしょうか? あと、 background-repeat: repeat-y; と入れても良いかも。 または background-colorを好きな色にして background-position: center center; で周りに枠があるように見せるとか・・・

その他の回答 (1)

回答No.1

ウィンドウの大きさに合わせて可変する画像を配置するのはhtmlでは多分不可能かと思います。 対策としては擬似的に背景色と同化した画像を置くか、リピート表示にして(タイル画像のようにする)ごまかすくらいでしょうか。 どうしてもやりたいということであればFlashを使ってみては如何でしょう。しかしjpgデータは引き延ばすと汚いのであまりおススメしません。 具体的なものを見せて頂けるのであればもう少しほかの助言も考えられますが…。

関連するQ&A

  • 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の上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。

  • HTMLサイトのように…(HTMLについて詳しく分かる方お願いします

    <!-- BODY { background-image : url("○○.jpg"); background-attachment: fixed; background-position:0% 100%; background-repeat: no-repeat ; } --> コレを背景画像のタグとせず、HTMLサイトのように、ページに文字として出したいのですが、どうすればできるのですか? 説明下手ですいません´`

  • HTML 背景画像が下になりません

    HTMLで、メモ帳にタグを打ってページを作っています。 有名なタグ紹介サイトを見てやっているのですが、なかなかうまくいきません。 背景固定(スクロールしても背景が動かないもの)で、 背景色を青色にして、右下ギリギリに小さい画像を背景にしたいのですが、画像が右には寄るものの下に寄ってくれなかったり、必要以上に下の方へ下がってしまいスクロールしないと背景が出てこない等となってしまいます。 どういう風に打てばうまくいくでしょうか?

  • 背景画像をくりかえさないhtml

     すっごいど基礎な質問ではずかしい限りです。 いま手元にテキストがなく、分からないためみなさん の知恵をおかりしたいと思います。 背景画像をつくったのですが、普通に BODY background="../icon/○○○.jpg" だと、画像をくりかえして表示してしまうのですが これを繰り返さないにするのにはどうするのか?? そのHTMLを教えた下さい!! テキストがないと何もわからない超初心者なので なるべく詳しくお願いします。。。。

    • ベストアンサー
    • CSS
  • HTMLの画像ファイルにリンクを貼る方法?

    HTMLの画像ファイルにリンクを貼る方法? 「メモ帳」にHTMLのタグを打ち込みIEに表示できるか試しています。画像がうまく出ません。 <image scr=”富士山.jpg”>と入力しました。 画像ファイルはマイドキュメントのマイピクチャーにある「富士山.jpg」です。X印が出て画面が出ません。他の太字/斜体文字/アンダーラインはOKです。ホームページのマニュアルにある「イメージファイルも同じ場所に置く・・」の意味がわかりません。何か一工夫必要なようです。どなたか教えて下さい。以上 >ホームページ「超初心者のためのホームページ作成講座」より ホームページは、いくつかのページを同じ場所(サイト)に置いています。イメージファイルも同じ場所に置いておきます。もし、イメージファイルをサーバに転送していないと、せっかくタグを使ってリンクを張っても表示されません。イメージファイルの名前を間違って記述した場合も、「サーバの中にはそんなファイルないよっ!」ということで、エラーになってしまいます。

  • HTMLの背景画像の表示位置を変更する方法

    HTMLの背景画像の表示位置を変更する方法 質問させてください。 HTMLの背景画像ですが、スタイルシートのbackground-positionを使用すれば表示位置を変更することが可能です。 同様の機能をスタイルシートを使用せずHTMLタグのみで実現できないでしょうか? 例えば、<body background=""></body>タグにさらに何かの属性を追加する、などです。 ご存知の方がおられましたら、是非ともお教えください。

    • ベストアンサー
    • HTML
  • background-imageが効かない

    HTML5で組んだページでCSSを使っています。 bodyタグに設定したbackground-imageは背景に画像が表示されるのですが、body内に置いたid名をつけたdivタグに設定したbackground-imageが効きません。どのようにすれば効くのでしょうか。 【効く】 body { background-image: url("./images/haikei.jpg"); } 【効かない】 #contents { background-image: url("./images/haikei.jpg"); } そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。

    • 締切済み
    • CSS
  • HTML CSSについて

    HTML初心者です。 フォトアルバムを作りたいと思い 挑戦しているのですが なかなか上手くいかないので質問させてもらいます。 サムネイル作成にあたって a#thumbnail {background:url(photo1.jpg);} a#thumbnail {background:url(photo2.jpg);} a#thumbnail {background:url(photo3.jpg);} という記述のphoto○.jpgの画像のサイズをこの記述のなかで指定したいのですが なにか良い方法はあるでしょうか? よろしくおねがいします。

    • ベストアンサー
    • HTML
  • 背景画像の基準位置を決めたい

    開いた時、ウィンドウの右下に画像が来るようにレイアウトしたいですが…。 閲覧する人が任意に大きさにウィンドウを変えても画像自体の右下部分が隠れることなく、画像とウインドウの「右下固定」という基準が守られるようにしたいと考えています。 (矢印でウィンドウを大きくしたり縮めたりしても、それに合わせて画像がくっついてくる…といった感じです。) 色々やってみましたがうまくいきません。 タグは現在以下の通りです。 <STYLE type="text/css"> <!-- BODY{ background-color : black; background-image : url(****); background-repeat : no-repeat; } --> </STYLE> </HEAD> <BODY> </BODY> </HTML> わかりづらい説明ですみません。教えて頂けると助かります。

  • サイト内のページに飛ぶときの背景に関する異常

    (以下、一部分だけ取り出した記述です。) body{ background-color:#ffffff; background-image:url(bg.jpg); } #page{ width:960px; background-color:#ffffff; } ======================================== 【質問】 オフライン上ですが、以下のような症状が出ます。 考えられること、原因になりうる要素に思いあたることがあったら何でもいいので 教えてください。 【状態】 サイト内の他のページにリンクで切り替わるとき、あるいはTOPページに戻るとき、ブラウザの更新ボタンを押したとき、正確にはクリックしたマウスのボタンをはなした瞬間)など、ページを読み込むときに一瞬(まばたきのタイミング)ですが背景色の白(#ffffff)がチカッと表示され、その後画像が表示されるという状況です。 background-colorを白ではなく、緑に設定するとマウスを離した瞬間緑色が表示され、すぐに背景画像(ここではbg.jpg)が表示されます。 背景画像と同じ系列の色で背景色を指定してもやはり、一度background-colorが実施されたあとに背景画像が表示されている(ような感じ)のが目視できます。 【試してみたこと】 ●background-colorとbackground-imageの記述順を変えてみた。 ●background-colorの記述を取り、background-imageだけにしてみた。 ●background-repeatを記述したり、消してみたりした。 ●背景画像をjpgではなくgifのもので試してみた。 ●背景画像のサイズを(たとえば)200X140とか1200×800などと変えてみた。 【マシン、作成環境】 Windows7(64ビット)、メモリ8Gのノートマシン。 ホームページ作成ソフトはいっさい使用していない(メモ帳のみで手打ち)。

    • ベストアンサー
    • CSS

専門家に質問してみよう