- ベストアンサー
背景に画像を使いたい
タイトルの通りなのですが、 background-image: (url); 画像のurlをこの(url)の部分に記述するらしいのですが、画像のURLはどうやって取得するのでしょうか?まだサーバーは決まっていません。とても分かりにくい文かと思いますが、回答宜しくお願いいたします。
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
background-image: url(nus01w.jpg); または background-image: url('nus01w.jpg'); です。
その他の回答 (3)
- auty
- ベストアンサー率58% (284/486)
初歩的なことなので簡単に答えてみます。 ・ 第1の方法 URLには、ファイル名(img1.jpgとします)を記述すればよく、この場合 HTMLファイルと同じ場所に保存します。記述方法は、 url(img1.jpg) または url('img1.jpg') です。 ・ 第2の方法 画像ファイルが増えたりすると、まとめて別のディレクトリに保存することが多くなります。この場合、url() には、86tarou様の言われるように、HTMLファイルからの相対パスで画像を指定します。 「相対パス」については、改めて勉強してみてください。
お礼
ご回答有難うございます。自分もCSSに書こうかと思っています。 ファイル名はnus01w.jpgこのようになっているのですが、 background-image: nus01w.jpg;であっているのでしょうか?
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
ちょっと間違ったところがあるので。 スタイルシートに記述するurl()は、HTMLファイルではなく、スタイルシートのファイルが基準です。 HTMLファイルに<style>で記述していれば、そのHTMLファイルが基準になりますが、 CSSを使って<link>でリンクしていると、そのcssファイルが基準になります。 例 index.html <link href="css/index.css" 属性略> css/index.css body{ background-image:url(bg.png); } index.htmlからは、css/bg.png が読み込まれます。 この辺のことはスタイルシートの解説書や解説サイトに書いてあると思います。 http://okwave.jp/qa3885251.html 既に閉じられていますが、<base href="">と<a href="#top">の関係も同じで、<base>に書かれたパスが基準になります。
お礼
ご回答有難うございます。自分もCSSに書こうかと思っています。 ファイル名はnus01w.jpgこのようになっているのですが、 background-image: nus01w.jpg;であっているのでしょうか?
- 86tarou
- ベストアンサー率40% (5094/12701)
そのHTMLファイルのあるフォルダからの相対アドレスで記述すれば、サーバーが決まってなくても問題無いです。
お礼
ご回答有難うございます。自分もCSSに書こうかと思っています。 ファイル名はnus01w.jpgこのようになっているのですが、 background-image: nus01w.jpg;であっているのでしょうか?
関連するQ&A
- 背景画像がきれます
以前お聞きしたのですが、再度問題が出たのでよろしくお願いします。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> <!-- BODY{background-image : url(画像url); background-position:right top;} --> </style> </head> <BODY background="画像url" style="background-repeat:no-repeat"> でhtml書くと希望通り右上に画像が出たのですが、ずいぶん画像を小さくしなければなりません。もう少し大きくすると画像が切れてしまいます。今の状態で(小さい画像)では、実際サイトを見ると小さく画像の部分だけ区切ったような感じに見えます。どうすれば画像が区切ったような感じにならないのでしょうか?上記htmlが間違っているのでしょうか?それともう少し大きくして画像が切れない方法はないのでしょうか?よろしくお願いします。
- 締切済み
- その他(インターネット・Webサービス)
- ブログのタイトル背景部分に画像を入れたいのですが…
gooブログのカスタムメタルを使用しています。 タイトル部分に画像を入れていたのですが突然見れなくなってしまいました(以前は正常に表示されていました) /* /ページ全体共通指定*/ /* ブログのタイトル部全体の背景(デフォルトは画像使用) */ .header { height: 180px; background-image: url(画像のURL); background-attachment:fixed; background-repeat:no-repeat; background-position:left; } 頻繁にいじっていたのでどこか間違えているかもしれません。 が、何度見てもどこが間違ってるか自分ではサッパリわからなくなってしまいました; よろしくお願いします。
- ベストアンサー
- ブログ
- <tr>の背景画像について
お世話になっております。 表題のとおりなのですが、 <table width="500px"> <tr style="background-image:url('back.gif');"> として、 back.gifが500pxの画像だとします。 <tr style="background-image:url('back.gif');"> <td>aaaa</td> </tr> と、tdが1つだった場合は問題ないのですが、 <tr style="background-image:url('back.gif');"> <td>aaaa</td> <td>bbbb</td> </tr> とした場合、250pxが2枚繰り返しのような状態になってしまいます。 これを回避し、tdが何個になっても、trの画像を1枚で表示させることはできないでしょうか。 ちなみに、背景画像は500px固定です。短く切ってリピートはできない状態です。 よろしくお願いします。
- ベストアンサー
- HTML
- 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の上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- CSSで背景画像を設定する
<html> <head> <title>--------</title> <style type="text/css"> body{background-image:url(image/-----.jpg)} </style> </head> ~~~ 画像を設定しましたが別のファイルではこの設定で表示できましたがこのファイルでは背景画像が設定できません。
- ベストアンサー
- HTML
- cssで背景画像を記事本文の長さにあわせて自動に引き伸ばす方法。
宜しくお願いします。 タイトル通りなのですが、 記事背景の画像を記事長さに合わせて自動的に引き伸ばす方法が判らず困っております。 background: url(背景.png) 上記のお尻部分に何か付け足すのでしょうか?
- ベストアンサー
- HTML
- 背景画像の基準位置を決めたい
開いた時、ウィンドウの右下に画像が来るようにレイアウトしたいですが…。 閲覧する人が任意に大きさにウィンドウを変えても画像自体の右下部分が隠れることなく、画像とウインドウの「右下固定」という基準が守られるようにしたいと考えています。 (矢印でウィンドウを大きくしたり縮めたりしても、それに合わせて画像がくっついてくる…といった感じです。) 色々やってみましたがうまくいきません。 タグは現在以下の通りです。 <STYLE type="text/css"> <!-- BODY{ background-color : black; background-image : url(****); background-repeat : no-repeat; } --> </STYLE> </HEAD> <BODY> </BODY> </HTML> わかりづらい説明ですみません。教えて頂けると助かります。
- 締切済み
- 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に関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。
- ベストアンサー
- JavaScript
- IE以外のブラウザで背景を固定させる方法
スタイルシートで、ブログのタイトル部分の背景を固定しています。 IE6.0では画像が表示されるのですが、NetscapeやFirefoxでは表示されず、指定してある背景色だけになってしまします。 #title {background: #000 url("画像のURL") no-repeat; background-position:top;background-attachment : fixed;} このように記述していますが、IE以外のブラウザで表示させるにはどのようにすればいいのでしょうか。
- ベストアンサー
- ブログ
- cssで背景画像が貼れない
background-image: url(××.gif) cssで背景画像を表示させたいのですがこのタグだとどうしても 表示されません。 画像は同じフォルダにあります。 どなたかご教授願えませんでしょうか お願いします。
- 締切済み
- HTML
お礼
問題を解決できました!皆さん本当に有難うございました。