トップ画面のデザインに写真を載せる方法
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
こんにちは！
デザインのカテゴリと迷ったのですが、こちらに質問させて頂きます。
ホームページで、トップ画面の背景にお気に入りの写真を使おうと思い、スタイルシートに写真をリンク(？)させてみたのですが、反映されません。
背景色を変えることと写真を表示させることは出来たので、その応用でやってみたのですが…。
なにか基本的な部分を見落としているのでしょうか？
それとも書き方が悪いのでしょうか。
もしお時間ありましたら、ご回答下さると嬉しいです。
デザインのカテゴリと迷ったのですが、こちらに質問させて頂きます。
ホームページで、トップ画面の背景にお気に入りの写真を使おうと思い、スタイルシートに写真をリンク(？)させてみたのですが、反映されません。
背景色を変えることと写真を表示させることは出来たので、その応用でやってみたのですが…。
なにか基本的な部分を見落としているのでしょうか？
それとも書き方が悪いのでしょうか。
もしお時間ありましたら、ご回答下さると嬉しいです。
Aya さん
09月24日 20時40分
Ayaさん、こんにちは。
背景に画像を指定しているけれども反映されない……ということですね。CSSですので、こちらのカテゴリで適切と思います（とは言え、カテゴリが多少違っていたとしても問題ありません(^-^)）。
すでに背景色を変えることができているので、CSS（スタイルシート）の記述位置は、問題無いと想像されます。
可能性として考えられるのが、下記のどちらかです。
・CSSのタイプミス
・画像のパス指定のミス
おそらくは後者であることが多いです（私も手入力するときは、たまに間違えます）。
まず、CSSを記載しているのは、ＨＴＭＬの中でしょうか、それとも外部のCSSファイル（推奨）でしょうか。それによっても記述が変わることがあります。
例として、下記のようなフォルダ構造になっていたとします。
/img/background_image.jpg （背景画像）
/index.htm （HTMLファイル）
/css/common.css （CSSファイル）
/index.htmの中から背景画像を指定するのであれば、下記のCSS。
/css/common.cssからなら、下記のCSSになります。
※ファイル名やフォルダ名は、Ayaさんの環境に適宜読みかえてください。
※background-imageでも可です。
画像指定する場所と、画像の置いてある場所によって、パスが変わることが重要ポイントです。
もし分かりづらいところがあれば、下記からお気軽にご返信ください。
解決しない場合は、該当箇所のCSSを貼り付けてくださっても大丈夫です。
背景に画像を指定しているけれども反映されない……ということですね。CSSですので、こちらのカテゴリで適切と思います（とは言え、カテゴリが多少違っていたとしても問題ありません(^-^)）。
すでに背景色を変えることができているので、CSS（スタイルシート）の記述位置は、問題無いと想像されます。
可能性として考えられるのが、下記のどちらかです。
・CSSのタイプミス
・画像のパス指定のミス
おそらくは後者であることが多いです（私も手入力するときは、たまに間違えます）。
まず、CSSを記載しているのは、ＨＴＭＬの中でしょうか、それとも外部のCSSファイル（推奨）でしょうか。それによっても記述が変わることがあります。
例として、下記のようなフォルダ構造になっていたとします。
/img/background_image.jpg （背景画像）
/index.htm （HTMLファイル）
/css/common.css （CSSファイル）
/index.htmの中から背景画像を指定するのであれば、下記のCSS。
background: url(img/background_image.jpg);
/css/common.cssからなら、下記のCSSになります。
background: url(../img/background_image.jpg);
※ファイル名やフォルダ名は、Ayaさんの環境に適宜読みかえてください。
※background-imageでも可です。
画像指定する場所と、画像の置いてある場所によって、パスが変わることが重要ポイントです。
もし分かりづらいところがあれば、下記からお気軽にご返信ください。
解決しない場合は、該当箇所のCSSを貼り付けてくださっても大丈夫です。
馬場誠 さん
09月25日 10時29分
解説ありがとうございます！
background:url(img/background_image.jpg);
でやってみたら出来ました！
自分で本を見て、色々試してみても全然できなかったので、画像が表示された瞬間に思わずガッツポーズしてしまいました(≧ω≦)
用意した画像サイズが小さかったみたいで、４分割されて表示されてしまいました。
今はホームページを完成させることを目標にして、画像サイズの調整などはもう少し慣れてから挑戦したいと思います。
丁寧な説明、ありがとうございました！
background:url(img/background_image.jpg);
でやってみたら出来ました！
自分で本を見て、色々試してみても全然できなかったので、画像が表示された瞬間に思わずガッツポーズしてしまいました(≧ω≦)
用意した画像サイズが小さかったみたいで、４分割されて表示されてしまいました。
今はホームページを完成させることを目標にして、画像サイズの調整などはもう少し慣れてから挑戦したいと思います。
丁寧な説明、ありがとうございました！
Aya さん
09月27日 22時29分
Ayaさん、こんばんは。
無事できたようで、よかったです(^-^)
また何かありましたら、お気軽に＆何度でもご質問ください。
現在はまだシステムのテストもかねていますので、ご投稿くださった方がむしろ嬉しいですので☆
無事できたようで、よかったです(^-^)
また何かありましたら、お気軽に＆何度でもご質問ください。
現在はまだシステムのテストもかねていますので、ご投稿くださった方がむしろ嬉しいですので☆
馬場誠 さん
09月28日 19時20分
