背景画像を設置するための相対パスの書き方を知りたい。

Question

ググるとたくさんの情報が出てくるのですが、いまいち動きませんので
背景画像を設置するための相対パスの書き方を知りたいです。

このような時の場合でimg1.jpgの背景画像を相対パスを使ってindex.htmlに指定したい時には
どう書いたらいいでしょうか？

試したこと(動かない)

<img class="hogehoge" src=('./img/img1.jpg')>

<img class="hogehoge" src=('../img/img1.jpg')>

 <img class="hogehoge" style="background-image: src=../img/img1.jpg;">

Comments

[退会済みユーザー]

回答欄に移しました。

[m.ts10806]

何を参照したのか記載してください。
本当に提示されたようなコードがあったのなら、間違っている情報を記載しているということで投稿者に指摘しなければなりません。質問者さんのような被害者を増やさないために（質問者さんが曲解している可能性は高いですけどね）

Answer 1

背景画像ならcssで指定するのでimgタグ採用は間違ってます。
3つ目は構文が間違ってます。
background-image
相対パス以前の問題です。

ドキュメント確認されたほうが良いですし（imgタグも同様)
構文チェックはしましょう。構文チェック機能のあるエディタの採用はマストです。

Comments

[Larkiwing]

回答ありがとうございます。

[m.ts10806]

お礼より理解のほどのフィードバックを。理解半端なまま同種の質問してばかりだと誰も相手にしなくなり、アドバイスより低評価やきつめの指摘が多くなります。

[Larkiwing]

そもそも論、背景画像を設置したい場合にはcssに書き込むことでhtmlに書くことではありません。
また、コードを書いても動かないからとググりながら、
次の記事を読んでいくよりは、まずはドキュメントに目を通しましょう。
さもなければ「試したこと」のようなコードがでてくることはまずないでしょう。
そして、ちゃんと読むことによりしっかりとした使い方や意味が分かります。
結果スキルも知識も伸びます。

背景画像や試したことはK_3578さんのコメント欄にも書きましたが、
https://manablog.org/bootstrap-img-text/
などの情報を参考にしました。

https://developer.mozilla.org/ja/docs/Web/CSS/background-image
をm.ts10806さんから頂き再度確認したところ背景画像はcssに書き込むこと
ということを学びました。

※間違った解釈をした人が書いたもの読むとその勘違いを受け継ぐので注意が必要。

が今回僕の学んだことです。

[m.ts10806]

引用と自身のコメントは分かるようにしてもらえたら助かります。質問文も他人が読むものなので配慮を覚えてください。

[Larkiwing]

以後気を付けます。

[m.ts10806]

質問は編集できますので、投稿後も自分で読み返してみると良いです。

Answer 2

サイトルート相対パスを使ってはいかがですか？

img フォルダがサイトルート直下にあるなら img src="/img/img1.jpg" とすればそれを利用する xxxxx.html ページがサイトのどのフォルダにあっても、それと相対的になんちゃらは考える必要がなくなります。

（質問へのコメント欄から回答欄に移しました。サイトルート相対パスをお勧めしたかったので）

Comments

[Larkiwing]

ルート相対パスというのを初めて知りました。
回答ありがとうございます。

Answer 3

<img class="hogehoge" src=('./img/img1.jpg')>

属性値は ' または " で囲みます。( ) ではありません。

 <img class="hogehoge" style="background-image: src=../img/img1.jpg;">

CSSプロパティにURLを書くときは、url(./img/img1.jpg) のように書きます。src= ではありません。

Comments

[Larkiwing]

回答ありがとうございます。

Answer 4

<img class ="hogehoge" src="img/img1.jpg">

では？

あぁ、背景画像か。それならcssのbackground-imageプロパティ使ってください。

---

######蛇足

<img class ="hogehoge" src="../img/img1.jpg">

因みにこれだと一つ上の階層を指定する事になってます。

Comments

[m.ts10806]

背景画像らしいです

[K_3578]

@m.ts10806さん

質問見直して気付きました。ご指摘感謝します。

[m.ts10806]

タイトルと内容が合致してないのも問題としてはありますね。途中で話変わってる気がしなくもない

[K_3578]

@m.ts10806さん

どうやら前の質問で回答者の方とやりとりしてて分からなかったから新規スレッド建てたようです。
とりあえず「試したこと」を見る限り、普通に構文自体理解してなさそうですが

[m.ts10806]

あれで分からないとなると、今回で理解得られるか微妙なところですね。
ドキュメント毛嫌い勢だったか

[K_3578]

MDNはHTMLStandard読むよりはよっぽど優しいと思いますがね。

過去質問見る限りWebサイト製作案件とか請け負ってるらしいですが大丈夫なんでしょうか･･･。

[m.ts10806]

まあ、出来ても出来なくても我々には無関係なので、お客さんに迷惑掛けないようにねくらいで

[Larkiwing]

回答ありがとうございます。
まだまだ未熟ですのでこれからもよろしくお願いします。

[K_3578]

はい、ところで「試したこと」は何を参考にしてあのような書き方をしたのでしょうか？

[Larkiwing]

最初は絶対パスの書き方
<img class="" src="https://picsum.photos/200" alt="">
でいいと思っていたのですが、相対パスにしたかったので、
https://manablog.org/bootstrap-img-text/
の記事を参考にしつつ
<div class="col-xs-12 cover-img" style="background-image:url('https://manablog.org/wp-content/uploads/2016/11/top-img.jpg');">
の部分から抜粋しつつ、それでもちゃんと動かなかったので
https://developer.mozilla.org/ja/docs/Web/CSS/background-image
を見ました。それでも動かなかったので何かが違うと思いいじったらこうなりました。

なので、試したことに1部の3つを入れました。

[K_3578]

とりあえず、ちゃんと理解してたら括弧で囲む事はしないと思うのでとりあえずMDNはhtml,css,JavaScript
やるなら常に開いといて損は無いです。

[Larkiwing]

アドバイスありがとうございます。常時開いておきます。

Answer 5

相対パス絶対パスの問題ではなく記述が間違っているようです。

---

画像を表示させる

<img src="./img/img1.jpg">

---

div内に背景画像として表示させる

①

<div style="background-image: url(./img/img1.jpg);">
内容
</div>

もしくは
②

<div class="hoge">
内容
</div>

/* style.cssへの記述 */
.hoge{
  background-image: url(./img/img1.jpg);
}

index.html全体の背景にしたいなら

/* style.cssへの記述 */
body{
  background-image: url(./img/img1.jpg);
}

Comments

[Larkiwing]

丁寧に回答ありがとうございます

Answer 6

img/なんたら.jpg

でやってみよう

Comments

[Larkiwing]

回答ありがとうございます。