MAMPによるローカル環境でのワードプレスサイト開発時に、背景画像が表示されない

前提・実現したいこと

ウェブデザイナー初心者です。
外部より頂いたテーマを編集し、他サイトのデザインを新たに作成しております。
(MAMPを使用しローカル環境で開発しています。)

ワードプレスにて、当データを反映させたのですが、画像、cssなどが画面上に反映されない状態が発生しました。
取り急ぎ、head内の
/wp-content/themes/....
の直前に、

<?php echo home_url(); ?>を追加し、画像とcssの反映を行ったのですが、

背景画像(cssに記述してあるbackground-image:url(/wp-content/themes/...))
の出力のみができずやり方がわかりません。

css内の背景画像の出力にはどのような記述の追加が必要でしょうか？
ご回答いただけると幸いです。

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

jquery-1.11.1.min.js:2 GET http://localhost:8888/wp-content/themes/CD/_common/img/bg_index_2.png 404 (Not Found)
(anonymous) @ jquery-1.11.1.min.js:2
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
ready @ jquery-1.11.1.min.js:2
J @ jquery-1.11.1.min.js:2
jquery-1.11.1.min.js:2 GET http://localhost:8888/wp-content/themes/CD/_common/img/bg_index.jpg 404 (Not Found)
(anonymous) @ jquery-1.11.1.min.js:2
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
ready @ jquery-1.11.1.min.js:2
J @ jquery-1.11.1.min.js:2
jquery-1.11.1.min.js:2 GET http://localhost:8888/wp-content/themes/CD/_common/img/icon_arrow_bottom.svg 404 (Not Found)
(anonymous) @ jquery-1.11.1.min.js:2
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
ready @ jquery-1.11.1.min.js:2
J @ jquery-1.11.1.min.js:2
jquery-1.11.1.min.js:2 GET http://localhost:8888/wp-content/themes/CD/_common/img/bg_index_nav_service.jpg 404 (Not Found)
(anonymous) @ jquery-1.11.1.min.js:2
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
ready @ jquery-1.11.1.min.js:2
J @ jquery-1.11.1.min.js:2
jquery-1.11.1.min.js:2 GET http://localhost:8888/wp-content/themes/CD/_common/img/bg_index_nav_about.jpg 404 (Not Found)
(anonymous) @ jquery-1.11.1.min.js:2
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
ready @ jquery-1.11.1.min.js:2
J @ jquery-1.11.1.min.js:2
jquery-1.11.1.min.js:2 GET http://localhost:8888/wp-content/themes/CD/_common/img/bg_index_nav_member.jpg 404 (Not Found)
(anonymous) @ jquery-1.11.1.min.js:2
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
ready @ jquery-1.11.1.min.js:2
J @ jquery-1.11.1.min.js:2
jquery-1.11.1.min.js:2 GET http://localhost:8888/wp-content/themes/CD/_common/img/bg_index_news.png 404 (Not Found)
(anonymous) @ jquery-1.11.1.min.js:2
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
ready @ jquery-1.11.1.min.js:2
J @ jquery-1.11.1.min.js:2
jquery-1.11.1.min.js:2 GET http://localhost:8888/wp-content/themes/CD/_common/img/icon_arrow.png 404 (Not Found)
(anonymous) @ jquery-1.11.1.min.js:2
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
ready @ jquery-1.11.1.min.js:2
J @ jquery-1.11.1.min.js:2
jquery-1.11.1.min.js:2 GET http://localhost:8888/wp-content/themes/CD/_common/img/bg_index_contact.jpg 404 (Not Found)
(anonymous) @ jquery-1.11.1.min.js:2
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
ready @ jquery-1.11.1.min.js:2
J @ jquery-1.11.1.min.js:2
(index):146 GET http://localhost:8888/proaxis/%3C?php%20echo%20home_url();%20?%3E/wp-content/themes/LLL/_common/img/img_porfolio_nothumb.png 404 (Not Found)

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

画像は実際どこに置いてありますか？
エラーからすると画像のファイルパスが違うようですが、そのcssの記述があるファイルからの相対パス(またはWebルートフォルダからの絶対パス)にする必要があります。
見たところテーマのフォルダを直に見に行っているようですが、ブラウザからアクセス可能なパスでないとcssからもアクセスはできません。
まずはブラウザからアクセスして画像が表示できるurlを確認されては如何でしょうか。

投稿2019/01/23 04:43