Q&A
2枚の画像は同じものではないでしょうか？
###前提・実現したいこと
ここに質問したいことを詳細に書いてください
HTML,CSSでWebSiteを作っています。iphoneで撮った写真を背景画像として貼るためにCSSにbackground-image: url(ファイル名);と入力したのですが表示されません。
###試したこと
HTMLの方では<img>タグで同じ写真を表示できました。
###補足情報(言語/FW/ツール等のバージョンなど)
写真が大きすぎて背景画像として表示されないということはありますでしょうか。
回答3件
0
<img>はHTMLから見た階層、url()はCSSから見た階層となります。
HTMLとCSSが同じ階層にあることはあまりないので、たぶん違うでしょう。
そこを正しく設定してください。
投稿2017/08/24 09:18
総合スコア13749
キャッシュという可能性も
HTML,画像のファイルとCSSのファイルを違う場所に保存していました。同じ場所にまとめて更新したら背景画像を貼ることができました。回答いただきありがとうございます。
0
background-image: url(img_163.JPG);
とありますが「stylesheet.css」と同じ階層に画像を配置してますか？
以下の記述を試してください。
同じ階層にある場合
background-image: url(./img_163.JPG);
一つ上の階層にある場合
background-image: url(../img_163.JPG);
一つ上の階層のフォルダの中に場合（imageは例です）
background-image: url(../image/img_163.JPG);
投稿2017/08/24 09:01
編集2017/08/24 09:04
総合スコア274
同じ階層にあるのでbody {
margin: 0;
background-image: url(./img_1603.JPG);
}
と書いてみましたが、画像は表示されません。
HTMLのほうに<img class="newyork" src="img_1603.JPG">と書いたら表示されましたが、CSSでは背景画像を表示できません。
なるほどそれでしたらプラスでcssの背景画像のサイズを指定してみてください。
background-size:500px; /*背景画像のサイズ指定*/
必要ないかもしれませんが、リピート表示のソースも書いておきます
background-repeat: no-repeat; /*リピートの有無*/
これでもできない場合はbodyに指定するのではなく、
body直下をdivタグなどでまとめてから指定した方が良いかと思います。
<body>
<div class="wrapper">
〜〜〜〜コンテンツエリア〜〜〜〜〜
</div>
</body>
失礼しまいた。。見落としていた部分があります。
元のソースにダブルクウォーテーションが記述されていませんでした。
""を()内に記述してください
誤 background-image: url(./img_1603.JPG);
正 background-image: url("./img_1603.JPG");
HTML,画像のファイルとCSSのファイルを違う場所に保存していました。同じ場所にまとめて更新したら背景画像を貼ることができました。ダブルコーテーションを入れずに、background-image: url(img_1603.JPG);で画像を表示することができました。CSSで背景画像を書くときはダブルコーテーションは要らないのでしょうか、いずれにしても背景画像を貼れて良かったです。ありがとうございます。
表示できてよかったです！
基本的にbackground-imageの中には""はなくても大丈夫です！
古いブラウザのバージョンによっては必要な場合ありますが、
今時のブラウザでしたらHTML5に対応してあるので必要ありません。
参考までに以下が仕様になります。
http://www.htmq.com/style/background-image.shtml
0
自己解決
HTML,画像のファイルとCSSのファイルを違う場所に保存していました。同じ場所にまとめて更新したら背景画像を貼ることができました。
投稿2017/08/24 11:17
総合スコア25
あなたの回答
tips
プレビュー
