background-imgがWordPressにて表示されないです。

Question

前提・実現したいこと

WordPressにてCSS,background-imgにて画像を表示させたいです。

発生している問題・エラーメッセージ

Chromeツールで指定したURLを別タブで開くようにして確認すると４０４エラーになります。

該当のソースコード

<div class="introduction">
        <div class="profile">
            
            <div class="prof">
                <h2>おジャコ丸<span>について</span></h2>
                <dl>
                    <dt>生年月日</dt>
                    <dd>10月12日</dd>
                    <dt>血液型</dt>
                    <dd>A型</dd>
                    <dt>出身地</dt>
                    <dd>岐阜県羽島市</dd>
                    <dt>メールアドレス</dt>
                    <dd>[e-mail]</dd>
                </dl>
            </div>
        </div><!--profile-->
```CSS

```.introduction .profile {
  position:relative;
  width:100%;
  background-image: url("/img/IMG_0300.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-origin: content-box;
  background-position: center;
}

試したこと

使用しているVScodeでcommand＋クリックで表示できることは確認しております。しかしWeb上では表示されず、開くと４０４になります。
同じＣＳＳ指定を他の幅、高さを指定している要素に対し指定しても表示されませんでした。

補足情報（FW/ツールのバージョンなど）

使用環境はMAMPを使用しPHPは8.0です。アパッチです。
ご参考にChromeツールのコンピューテッド内容を添付します。

background-attachment scroll
background-clip border-box
background-color rgba(0, 0, 0, 0)
background-image url(http://localhost/img/IMG_0300.jpg)
background-origin content-box
background-position-x 50%
background-position-y 50%
background-repeat-x
background-repeat-y
background-size cover
border-bottom-color rgb(85, 85, 85)
border-bottom-style none
border-bottom-width 0px
border-image-outset 0
border-image-repeat stretch
border-image-slice 100%
border-image-source none
border-image-width 1
border-left-color rgb(85, 85, 85)
border-left-style none
border-left-width 0px
border-right-color rgb(85, 85, 85)
border-right-style none
border-right-width 0px
border-top-color rgb(85, 85, 85)
border-top-style none
border-top-width 0px
color rgb(85, 85, 85)
display block
font-family 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif
font-size 10px
height 180px
letter-spacing 1.5px
line-height 20px
margin-bottom 0px
margin-left 0px
margin-right 0px
margin-top 0px
outline-color rgb(85, 85, 85)
outline-style none
outline-width 0px
padding-bottom 0px
padding-left 0px
padding-right 0px
padding-top 0px
position relative
vertical-align baseline
width 821.094px

Comments

[tabuu]

>background-image: url("/img/IMG_0300.jpg");

URLがスラッシュから始まっているので以下のようなURLになりますが
想定しているパスと一致していますか？
http(s)://example.com/img/IMG_0300.jpg

[ojakomaru]

はい。一致しております。
そのディレクトリでまちがいないです。

Answer 1

ご閲覧頂きお時間をさいていただいた方々様、誠にありがとうございました。
ものすごく初歩的な内容でお恥ずかしい限りですが、別フォルダーにてページごとのスタイルシートを条件分岐にて使い分けていた事を思い出し、結論のコードですが、

background-image: url("../img/IMG_0300.jpg");

こちらのコードで無事解決いたしました。

また至らない質問など投稿してしまった際にはどうか温かい目でお付き合いいただけたらと思います。
何卒宜しくお願いいたします。

Answer 2

• 画像までのパスが正しいかどうか
• 画像のファイル名が正しいかどうか
• 画像のパーミッションが適切かどうか

今一度ご確認いただけますでしょうか。

Comments

[ojakomaru]

ご回答下さりありがとうございます。
すべての項目（パーミッションは初耳でしたが）を確認しましたが問題なさそうです。

新たに試したこととして普通にIMGタグで出力、WordPressなのでget_stylesheet_directory_uri()で
画像へのパスを指定し表示することが出来ました。

依然としてbackground−imgの場合が表示することが出来ておりません。