• ベストアンサー

背景画像の折り返しをしたい

背景画像を横に折り返したいのですが、下のタグを打つと、ドキュメントウインドウでは表示されるのですが、ブラウザで見ると何も表示されません。 画像の格納場所は、あっているはずですが、どこが間違っているのかわかりません。。。 dreamweaver MX、ブラウザはIE6.0を使用しています。 手打ちで行ったのですが、DREAMWEAVERの操作でできるのであれば、その方法も知りたいです。 お手数ですがどなた教えてください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>上のフレーム</title> <STYLE type="text/css"> <!-- BODY{ background-image:url(/img/top/line2.gif); background-repeat:repeat-x; } --> </STYLE> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> </body> </html>

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

  • ベストアンサー
  • sken27
  • ベストアンサー率43% (7/16)
回答No.2

スタイルシートでの記述はbennie_777さんの回答通り と思います。 質問のソースでは画像指定の background-image:url(/img/top/line2.gif); のところでファイル名をフルパスで記載しているようですね。 外部スタイルシートであれば外部スタイルシート(*.css) からの相対パスだそうです。 相対パスに変更してみてはいかがでしょうか。 たとえばソースが/indexの下にあるなら /img/top/line2.gifを url(../img/top/line2.gif) でしょうか

takazu39
質問者

お礼

urlを(./img/top/line2.gif)にしたら表示できました!! 相対パスをきちんと理解していなかったようです。 ご指摘いただいてわかりました。 どうもありがとうございました!

takazu39
質問者

補足

ありがとうございます。 フルパスとは絶対パスのことでしょうか。 相対パスで指定しているつもりではいるのですが・・・。 ご指摘があったように、ソースをかえてみましたが、だめでした。 また、チャレンジしてみます。

その他の回答 (1)

回答No.1

dreamweaverのやり方は分からないのですが、手打ちなら恐らく下記のようになるのではないかと思います。 [上に表示したい場合] <style type="text/css"> <!-- body { background-image:url("壁紙URL"); background-repeat:repeat-x; background-attachment:fixed; } --> </style> [真ん中に表示したい場合] <style type="text/css"> <!-- body { background-image:url("壁紙URL"); background-repeat:repeat-x; background-attachment:fixed; background-position:center; } --> </style> [下に表示したい場合] <style type="text/css"> <!-- body { background-image:url("壁紙URL"); background-repeat:repeat-x; background-attachment:fixed; background-position:bottom; } --> </style> 違ったらまた言って下さい。

takazu39
質問者

お礼

urlを(./img/top/line2.gif)にしたら表示できました!! 壁紙URLのまちがいでした。どうもすみませんでした。 「パス」について間違って解釈していたようです。 ご回答いただき、どうもありがとうございました。

takazu39
質問者

補足

3パターンも教えていただきありがとうございます。 でも、表示はできませんでした。またいろいろ試してみます。

関連するQ&A

  • IEとスタイル

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> というタグがあります。 IE5,6,7にスタイルで対応させるには <style type=text/css>body{margin:0}</style></head><body> でよいですか?

    • ベストアンサー
    • HTML
  • フレームページの隙間

    フレームページを作ったのですが、フレームの間の隙間をなくしたのですがどのようになくすのか解りません。どうか教えて頂けないでしょうか。お願します。 実際のソースコート <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META name="GENERATOR" content="IBM HomePage Builder 2001 V5.0.0 for Windows"> <TITLE>もっくもっく</TITLE> </HEAD> <FRAMESET rows="155,*" frameborder="0" border="0" framespacing="0" framepadding="0"><!-- 上のフレーム --> <FRAME src="osawa1.html" name="1" scrolling="no" noresize topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <FRAMESET cols="700,*" frameborder="0" border="0" framespacing="0" framepadding="0"><!-- 左のフレーム --> <FRAME src="osawa2.html" name="2" scrolling="auto" noresize mtopmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <!-- 右のフレーム --> <FRAME src="osawa3.html" name="3" scrolling="no" noresize topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> </FRAMESET> <NOFRAMES> <BODY topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">フレーム対応ブラウザでご覧ください。</BODY> </NOFRAMES> </FRAMESET> </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> このタグをいれても、背景が表示されず真っ白です。 何か間違ってるところがありますか?

  • 背景画像を入れた際のページのズレ(MacIE5)

    前々から気になっていたのですが、背景の画像を入れてページを制作する際、MacのIE5のみページが右下にずれたりしませんか?(毎回じゃないですが、結構な確立で) <body background="bg.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> こんな感じで普通にbodyタグで指定しているのですが・・・ その他のブラウザ(mac、win)だとOKなんですが、なぜでしょうか? ただ、同じタグで書いても、ずれないページもあるので、何が原因かわかりません。 対処として、フレームで区切ったり、スタイルシートで位置を指定したりが考えられると思うのですが、今回はなるべくプレーンなHTMLのみで解決が迫られています。 どうか、宜しくお願いいたします。

  • 背景画像をウィンドウに合わせて動くようにしたいのですが

    WinXP ビルダー10を使用しています。 閲覧する人が任意の大きさにウィンドウサイズを変えた時にそれに合わせ背景画像が一緒にずずずっと移動する、というようにするようにしたいのですが(ウィンドウと磁石のようにくっついており、小さくしても背景画像の中心が画面に来る、という感じです)どうしたらよいのでしょうか?現在は背景画像が小さくするとそのまま見えなくなる状態です。 タグは以下になってます。 <HTML> <HEAD> <BASE target="_parent"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE>top</TITLE> <STYLE type="text/css"> <!-- </HEAD> </HTML> BODY{ background-color : black; background-image : url(****); background-repeat : no-repeat; background-attachment : fixed; } --> </STYLE> </HEAD> </HTML> 色々試したのですが…中々できません。 ご存知の方教えて下さい。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 背景画像を固定したのに…ビルダーです。

    こんにちは。 いま、ホームページビルダー7でホームページをつくっています。 よく、写真などの画像を右上に固定してるサイトってありますよね?スクロールしても動かないという。それをしたくてタグを調べ、ためしにやってみたのですが、画像が繰り返してしまうのです。 私は、1枚の空の写真だけを右上に貼りたいのですが…。 タグは以下のとおりです。 ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 HTML4.01 Frameset //EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ background-image : url(ファイル名.jpg); background-attachment : fixed; background-position : right top; background-repeat : no-repeat; } --> </STYLE> </HEAD> <BODY></BODY> </HTML> 一番不思議なのが、ビルダーで「繰り返さない」にチェックしているのになってしまっているということです。ただ画像が繰り返されてるのではなく、途切れ途切れに。 PC自身の問題なのでしょうか。 それと欲張ってもうひとつ。 スクロールバーの色をかえるタグをいれてみたのですが、ビルダー7では反映されないのでしょうか。まったくかわりません。 言葉で説明するのがどうも難くて…分かりづらくて申し訳ありません。お返事まっています。

  • HTMLをCSS

    ●<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> ●<table cellpadding="0" cellspacing="0"> 上記HTMLをCSSで設定するにはどういうソースになるのでしょうか? 教えて下さい。

    • ベストアンサー
    • HTML
  • 背景に指定したイメージ以外の余白を見せないようにする方法は?

    こんにちは!まさにタイトル通りの質問です。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME=""> <META NAME=""> <META NAME=""> <META http-equiv="refresh" content="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){      window.resizeTo(720,580);  } //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML> としていますが、窓を大きくしたりすると右や下に余白が見えてかっこわるいです。どうすれば改善しますか? お願いします☆

    • ベストアンサー
    • HTML
  • テーブルが左右に動いてしまう。

    テーブルを中央に配置してレイアウトしようと思っています。 が、リンクをクリックして、IE6.0ブラウザの「更新ボタン」を押すと左右に5ピクセルほど動きます。 交互に押すたびに左右へ動いてしまいます。 これはバグ?なのでしょうか? 回避する方法はありますか? できればCSSを使わずに、と思っているのですが。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>中央寄せ</title> </head> <body bgcolor="#FFFFCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div align="center"> <table cellspacing="0" cellpadding="0" width="750"> <tr> <td> <p><a href="1.html">NEXT</a></p> </td> </tr> </table> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 背景の表示が出来ません。

    ただいま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> と言う風になってるんですが、 友人は間違ってないと言っていますが画像は表示されてないようです。 何かおかしな点とかはありますでしょうか。 自分のパソコン内(アップしないでマイコンピュータで見る)でだと普通に表示されています。 アップすると見れなくなるのです。 何故なのでしょうか (既に色々出ていたみたいですがよく解らなかったので^^;)

専門家に質問してみよう