HTMLで背景画像を設定する方法は？
- HTMLの背景に画像を設定する方法を教えてください。
- background-imageプロパティを使用してHTMLの背景に画像を設定したいのですが、うまくいきません。
- 背景画像のURLをどのように指定すればよいのか分かりません。ご教示お願いいたします。
- ベストアンサー
こんにちは、質問があります。
こんにちは、質問があります。 今、見よう見真似である本にそってＨＰを作成しているのですが、 そこでうまくいかないところがあるので質問させてください。 bodyの部分を罫線で囲い、その罫線以外の余白？のところに、 background-imageで背景を入れたいのですが、どうも うまく入れることができないです。画像をサイトからダウンロードして画像の 名前をimageにしたのですが、html記入時background-image=url( ) の（ ）のなかに背景の住所を入れると思うのですが、image.jpegと入れるのは 間違いのような気がしていますが、どのように記述すればいいのかわかりません。 他にも原因があるようなら教えてほしいです。 よろしくお願い致します。
- ホームページ作成ソフト
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>今しがた試してみましたがうまくいきませんでした。 >他に何か原因としてかんがえられることはありませんでしょうか？ ソース全体の記述がどうなのか、また、参考になさっている本が具体的にどう書いてあるのか、 わかりませんので外しているかもしれませんが。。。。 ソース自体は正しく書かれているのに表示されないとなれば、 原因として考えられることは、 １．画像そのものがアップロードされていない（※web上で表示確認する場合） ２．画像の保存場所がHTMLファイルと同じフォルダ（ディレクトリ）内ではない ３．image.jpegということだが、実際のファイル名は拡張子部分も含めてそれとは異なっていた >image.jpegと入れるのは間違いのような気がしていますが、 なぜ「間違い」だと思うのでしょうか？ 画像ファイル形式が何なのか（jpgなのかgifなのかpngなのか）書いていなかったのですが、 jpg形式じゃないのにhtmlにimage.jpegと記述するのは確かに間違いになるし、画像も表示されません。 >画像をサイトからダウンロードして画像の名前をimageにしたのですが、 >（ ）のなかはimageだけでよいということでしょうか？ もしかしたら、貴方がお使いのパソコンでは拡張子が表示されない設定になっているのでしょうか？ お使いのパソコンで拡張子を表示しない設定になっているのでしたら、 ファイル名をimageだけ（拡張子表記無し）にしても、 自分のパソコン内では通じるかもしれませんが、 webサーバー上では拡張子部分も含めて同じファイル名にしないと通じません。 スペルは同じでも大文字小文字が異なっているだけでも表示されないので、 ホームページを作成するのでしたら、ファイル名は「拡張子を表示させて、スペル・大文字小文字も含めて統一」したほうがよいと思います。 まずは、表示させたい画像を 拡張子を表示させた状態でファイル名がどうなのか確認してみてください。 例えば、 jpg形式で、image.jpegではなくてimage.jpgだったのなら、htmlでの記述もimage.jpgとします。 画像を表示させたいページファイルと同じフォルダに画像が保存されているのであれば、 url(image.jpg)のようになります。 それでも上手く表示されないのであれば、 全体的に見てどこかの部分に何らかの間違いがあるのではないかと思います。
その他の回答 (1)
- szk9998
- ベストアンサー率45% (1024/2232)
>背景の住所 間違いではないのですけどね・・・ せめて、アドレスとかＵＲＬとか言いましょう。検索にも引っかからないですよ。 その画像ファイルが、HTMLファイルと同じディレクトリにあるのでしたら、ファイル名だけでＯＫです。 URLの表記の方法には文法があります。覚えておかないとダメな基本です。参考にしてください。 http://www.kanzaki.com/docs/html/htminfo-uri.html また、bodyの書き方ですが、styleタグを使用して書くのが今風です。 css（←知らなければ調べてください）との関連でも覚えておいた方がいいです。 例 <body style="border:1px solid red; background-image:url('image.jpeg')"> 幅1pxの赤いボーダーの枠が出ます。
補足
返信ありがとうございます。回答からいえるのは（ ）のなかはimageだけでよいということでしょうか？ 今しがた試してみましたがうまくいきませんでした。他に何か原因としてかんがえられることはありませんでしょうか？よろしくお願いします。
関連するQ&A
- html/css について質問です。
現在、htmlとcssを勉強しながら、トップページのコーディングしています。 以下の処理を行っています。 〇一番上に[幅136px高さ34px]のヘッダ画像を横方向にリピートして、background-attachmentはscrollで固定。上や左や右は余白なしにしたい。 〇一番下に[幅168px高さ42px]のフッダ画像を横方向にリピートして、background-attachmentはfixedでブラウザの下部分に常についてくるようにしたい。 〇javaScriptでランダムにトップの画像を表示している。 しかし、３点問題があります。 ●一番上の画像について、background-position: left bottom;にしても、ブラウザ等で確認してみると、 上や左に5px程度の余白(後ろの背景画像が隙間から見えている)ができてしまいます。 marginやpaddingを追加して0にしても、余白は埋まりません。余白を埋めてブラウザの上や左を埋めるにはどうすればよいでしょうか？ ●フッダの画像が、下にいけば消えてしまいます。CSSでheight: 42px;という設定をしているのですが、 この範囲がブラウザを大きくすると消えて見えなくなります。 だからといって、heightを設定しないと全くフッダ画像が表示されなくなります。消えずに常に表示されるようにするにはどうすればよいでしょうか？ ●またjavascriptで背景画像を表示させているにも関わらず、フッダ画像やヘッダ画像を背景画像のような記述でコーディングしてしまっています。これは普通の画像を右方向へリピートさせる方法がわからなかったため、background-repeat: repeat-x;というコードを書いてしまっています。このようなコーディングはやはり適当ではないでしょうか？ どなたかご指導お願いします。 [html] <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n] </SCRIPT> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> </div> </body> [css] #container{ width:100%; height:100%; } #top_header{ background-image: url(../image/top_header.gif); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{ background-image: url(../image/top_footer.gif); height: 42px; bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; }
- ベストアンサー
- CSS
- htmlやスタイルシートに詳しい方教えてください
初めてのHP作りがんばっています 早速行き詰まりました（´～｀) 800×600くらいのサイズの1枚のオリジナルイラストの画像があるのですがそれを背景としたいです 下記のように記述いたしました <html> <head> <title>tamaringo world</title> <style type="text/css"> body { background-image: url(img/haikei.jpg); background-repeat: no-repeat } </style> </head> <body> </body> </html> 背景として画像は表示されますが左上に表示されてしまい右側と下に大幅な余白ができます 画面いっぱいに背景とするにはどうしたらいいでしょうか 横スクロールにはしたくないです できれば縦スクロールもなしで1枚の画像がポンと出るようにしたいです 初心者で質問の意図が分かりにくいかと思いますがアドバイスいただけると本当にうれしいです よろしくお願いします
- ベストアンサー
- HTML
- 背景画像を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
- スタイルシートで背景画像を指定
今までbodyタグで背景を指定していたのですが、スクロールバーや余白の設定で スタイルシートを使うことになったので、背景画像もスタイルシートで指定することにしましたが、何度やっても表示されません。 このように書いてみました。 <style type="text/css"> <!-- BODY { background-image:url(img/28.gif); } BODY { 余白の設定} BODY {スクロールバーの設定 } --> </STYLE> htmlと同じフォルダの中にある、imgフォルダの28.gifという画像です。 画像のパスは間違っていません。アップロードもしてあります。 スタイルシートの解説をしているサイトさんを見ても、 何が間違っているのかわかりませんでした。 なぜ背景が表示されないかわかる方いらっしゃいますか？ 余白やスクロールバーはきちんと表示されているのですが・・・
- ベストアンサー
- CSS
- gooブログオリジナルテンプレートの使い方
現在gooブログ（有料版）を使っています。テンプレートもカスタマイズ用のＣＬアドバンステンプレートを選択し、ＣＳＳを使ってオリジナルの写真を使ったテンプレートに変更したいのですが、使い方がわかりません、使い方には1.タイトルの背景に画像を表示するには CSS編集エリアから以下の行を見つけます。 #title-banner-body{background:url("");height:130px;} 「background:url("");」の（""）内に、画像のURLを記入します。 記述例：#title-banner-body{background:url("http://blogimg.goo.ne.jp/user_image/IMAGETITLE.jp");height:130px;}と書いてあるのですが、見つかりません、どなたか、テンプレートの変更の仕方詳しくわかる方はいませんでしょうか、どうか教えてくださいお願い致します。
- 締切済み
- ブログ
- 携帯サイトでの背景画像表示について
こんにちは。初めて携帯サイトの作成(i-mode)をしているのですが、 背景に画像を埋め込みたいと思って、 <body style="background-image:url(bg.jpeg);"> としたのですが、画像が現れません。 <IMG src="title.jpeg" width="100" height="35"> と、タイトル表示はできるのですが、背景がダメです。 PCの画面ではきちんと見れたのですが、 自分の携帯で確認したところ、見れませんでした。 背景画像の表示方法をご存知の方がいらっしゃいましたら 教えていただけないでしょうか？ また、いろいろなサイトを見ても、背景画像を使っているサイトを あまり見かけないので、背景画像を使う事で何か弊害が 出るのかなと思ったりしました。 ご存知の方がいらっしゃいましたら教えていただけませんか？ どうぞ宜しくお願いいたします。
- 締切済み
- HTML
- CSSで「html」にも背景指定をするのはどのような場合？
CSSで「html」にも背景指定をするのはどのような場合？ CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか？ もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる？と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。
- ベストアンサー
- CSS
- CSSの事で質問があります。
始めまして、過去ログを色々みたのですが、CSSの記述もままならない状態でちんぷんかんぷんです・・ 何方か教えて下さい。 CSSを使いソフトはdreamweaverを使っているのですが 左右の余白を指定した背景を使い、真ん中にメインコンテンツを置きたいと考えています。 Dreamweaverで試行錯誤し、やってみたのですが、dreamweaver上では思ったとおりに行くのですが、IEで見てみると真ん中のメインコンテンツ部分がなくなっており、全て背景になってしまいました・・・お手上げ状態です。 タグは --html-- <title>○○</title> <link href="Untitled-3.css" rel="stylesheet" type="text/css"> </head> <body style="margin:0"> <div style="background-color:FDE9FC;width:550px;height:800px;margin:auto"> <img src="top.gif" alt="○○" width="550" height="150"></div> </body> </html> --CSS-- body { background-image: url(kabe_bsp111.gif); background-color: #FFFFFF; background-repeat: repeat-y,x; margin-left: 35px; } です。 また、普通に見れてるdreamweaver上で、メインコンテンツ部分の一番上に画像を張り、画像の下に文字を打つため改行をすると、最上部の画像の上に余白ができてしまいます。 この現象もまったくもって？？です。 何方かこんな無知な奴にお力を貸して下さい・・・ 先輩方よろしくお願いします！！
- ベストアンサー
- CSS
- サイト内のページに飛ぶときの背景に関する異常
（以下、一部分だけ取り出した記述です。） 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
- Webタグの背景について
今HPを作っていますが チェックで作った背景に一つの画像を右下に固定表示させたいのですができるでしょうか？ 背景固定はできるんですけど画像を右下にやるのができません。 <body background="imagfolder/02.jpg" bgproperties="fixed"> のタグはチェックの背景になっています。 固定で検索すると <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> とでてくるんですが・・・
- 締切済み
- その他([技術者向] コンピューター)
お礼
ご丁寧な回答ありがとうございました。これから試してみます。 また回答が遅れすいませんでした。