• 締切済み

ホームページに画像を貼りたい

テキストエディットでHTMLを書き込んでホームページ作成をしている初心者です☆ 背景に画像を貼りたくてもどうやっても貼れなくて悩んでいます。 使っているパソコンはmacで、写真はFinderの中にあるマイファイルのイメージのoriginal.jpgを使いたいのです。 そこで、HTMLの方は body{background-image:url(マイファイル/イメージ/original.jpg); background-repeats:no-repeat; background-position:center;} と書き込みました。 CSSの方は、 body{ background-image:url(マイファイル/イメージ/original.jpg); background-repeats:no-repeat; background-position:center;} と書き込みましたが、ブラウザで見たところ写真が表示されなくて困っています。 本当に初心者で困っています。 できれば正しい写真の貼り方を教えていただきたいのですが、お願いします。

みんなの回答

  • katokundes
  • ベストアンサー率22% (492/2217)
回答No.2

そこで、HTMLの方は body{background-image:url(original.jpg); background-repeats:no-repeat; background-position:center;} と書き込みました。 CSSの方は、 body{ background-image:url(original.jpg); background-repeats:no-repeat; background-position:center;} __ original.jpg画像は html css と同じ場所(フォルダー)(ディレクトリ)に上げる。 macで作るときも(マイファイル/イメージ/original.jpg)からコピーしてhtml css と同じ場所にoriginal.jpg画像を置く

  • katokundes
  • ベストアンサー率22% (492/2217)
回答No.1

マイファイル/イメージ/original.jpg 上げたサイトにフォルダーが作ってあればよいですが(相対アドレス) マイファイル/イメージ/original.jpgのマイファイル/イメージ/を削ってoriginal.jpg をHTMLと同じ場所に置いては

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

  • 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
  • HTMLサイトのように…(HTMLについて詳しく分かる方お願いします

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

  • 画像の貼り付けについて。

    普通に画面上部に貼り付けることはできるのですが、リピートして貼り付けることができません。 <STYLE type="text/css"> <!-- body{ background-attachment:fixed; background-color:#000000; background-image:url(0266.jpg); background-position:top center; background-repeat:repeat-x;} --> </STYLE> ↑これはどこか違っているのでしょうか?

  • CSSによる背景画像のセンタリング。IE以外ではうまくいかない

    背景画像をセンタリングしたいのですが、以下のCSSソースでは、IE以外(firefoxなど)は左右しかセンタリングされません。 body{margin:0; padding:0; text-align:center; background-repeat: no-repeat; background-position: center center; background-image:url(../images/back5.jpg)} CSSハックを使って、個々のCSSを書くしかないんでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 背景に複数の画像を入れることは可能でしょうか

    HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか? もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }

    • ベストアンサー
    • HTML
  • 画像にオンマウスで背景画像を固定

    画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか? 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。 また、styleに <!-- BODY { background-attachment: fixed; background-repeat: repeat-x; background:position:top} --> を書いてみたりもしたのですが変化なしでした。 ご存知の方、詳しい方アドバイスお願いします。

    • ベストアンサー
    • HTML
  • 背景を固定する。

    <HTML> <HEAD> <TITLE>・・・</TITLE> <STYLE TYPE="text/css"> <!-- BODY { background-image: url(画像のURL); background-repeat: no-repeat; background-position: right bottom; } --> </STYLE> </HEAD> <BODY> ・ ・ ・ </BODY> </HTML> このタグをいれても、背景が表示されず真っ白です。 何か間違ってるところがありますか?

  • 時間帯によって背景画像を変える

    タイトル通りなのですが、なかなかうまくいきません・・・。 <BODY style="background-image:url(test.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;"> スタイルを使って右下に背景画像を表示しています。このtest.gifを時間帯によって変えたいです。 自分なりにこのようにしてheadタグの中に埋め込みましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!--- function geth(t){ if (t<=5) document.write("<BODY style='background-image:url(test1.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=11) document.write("<BODY style='background-image:url(test2.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=17) document.write("<BODY style='background-image:url(test3.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=23) document.write("<BODY style='background-image:url(test4.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); }}} } //---> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!--- h = new Date(); geth(h.getHours()); //---> </SCRIPT> <BODY BACKGROUND='test.gif'>という普通の背景の表示の仕方ならうまくできました。スタイルはheadの中では使えないのでしょうか・・・?どのようにすればうまくいくでしょうか?JavaScriptに関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。

  • 間違い。

    このHTMLは間違ってますか? ページを表示しても真っ白になります。 背景を右端に固定したいのですが。。 <HTML> <HEAD> <TITLE>・・・</TITLE> <STYLE TYPE="text/css"> <!-- BODY { background-image : url("画像のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> </HEAD> <BODY> ・  ・ </BODY> </HTML>

    • ベストアンサー
    • HTML

専門家に質問してみよう