質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

780閲覧

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

ojakomaru

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/09 02:32

前提・実現したいこと

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

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

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

該当のソースコード

HTML

1<div class="introduction"> 2 <div class="profile"> 3 4 <div class="prof"> 5 <h2>おジャコ丸<span>について</span></h2> 6 <dl> 7 <dt>生年月日</dt> 8 <dd>10月12日</dd> 9 <dt>血液型</dt> 10 <dd>A型</dd> 11 <dt>出身地</dt> 12 <dd>岐阜県羽島市</dd> 13 <dt>メールアドレス</dt> 14 <dd>youthfulday8348.@gmail.com</dd> 15 </dl> 16 </div> 17 </div><!--profile--> 18```CSS 19 20```.introduction .profile { 21 position:relative; 22 width:100%; 23 background-image: url("/img/IMG_0300.jpg"); 24 background-repeat: no-repeat; 25 background-size: cover; 26 background-origin: content-box; 27 background-position: center; 28}

試したこと

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

補足情報(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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tabuu

2021/03/09 07:46

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

2021/03/09 09:09

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

回答2

0

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

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

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

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

投稿2021/03/09 10:16

ojakomaru

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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

投稿2021/03/09 02:59

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ojakomaru

2021/03/09 05:44

ご回答下さりありがとうございます。 すべての項目(パーミッションは初耳でしたが)を確認しましたが問題なさそうです。 新たに試したこととして普通にIMGタグで出力、WordPressなのでget_stylesheet_directory_uri()で 画像へのパスを指定し表示することが出来ました。 依然としてbackground−imgの場合が表示することが出来ておりません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問