WPでbackground-imageが表示されない

Question

前提・実現したいこと

WordPress 5.7.2 を使用してbackgraound-imageでサイトロゴ画像を表示したいのですが、表示されません。

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

グーグルのデベロッパールールでは下記のように404エラーが表示。

style.css:1 GET http://portfolio8.local/wp-content/themes/img/[e-mail] 404 (Not Found)

該当のソースコード

<header class="l-header">
  <h1 class="header__logo">
    <a href="<?php echo esc_url(home_url('/')); ?>">
      <?php echo esc_html(bloginfo('name')); ?>
    </a>
  </h1>
  
</header>

.header__logo > a {
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url('../../img/[e-mail]') no-repeat;
  width: 300px;
  height: 70px;
  background-size: 300px 70px;
}

/* vscodeで確認できている現在のリンク先が下記です */
file:///Users/suzukikouhei/Local Sites/portfolio8/app/public/wp-content/themes/pas-pol/img/[e-mail]

ファイル階層は下記です。

表示させたい画像は赤枠のpngです。

試したこと

下記の参考記事を確認しつつ、階層を修正や改めてファイル階層をたどりながらコーディングしてみましたが、表示されませんでした。
参考記事

ご助力いただけます様お願い致します。

Answer 1

../../だと2つ上に上がってます。
cssフォルダと同じ階層にimgフォルダかあることから、../で良いのでは。

/* vscodeで確認できている現在のリンク先が下記です */

file:///Users/

WordPressはPHPで作られていて、PHPはWebサーバ上で動作する言語です。
パスもhttpアクセスが前提となっていますのでfile…のようなローカルファイルを指すパスはあてにしてはいけません。
ブラウザから参照されるのはDocument Root配下に配置されたファイルです。

Comments

[aoshiro]

ご回答いただき、誠にありがとうございます。
無事、表示されました。
とてもわかりやすいご説明ありがとうございました。
大変勉強になりました。