CSSで画像が表示されない

Question

基礎的な問題だと思われます。
過去の質問でも全く同じ疑問をもたれた方もいて、確認しましたが解決できません。

HTMLでは画像が表示されるのにCSSでは表示されません。

![]

![]

半角・全角スペースがあるのか、 ""これが半角であるか確認してもダメで、
Finderから画像選択して画像の名前をコピーして貼り付けてもダメでした。

「アイコンモノ」さんのサイトからPNGで16pxダウンロードして、「icon-pen-1」と名前を変えただけです。

HTMLで貼り付けると表示されたので・・・・・何かしらの原因はあるんでしょうが見当たりません(＞＜)

分かる方、切実にお願いします。

画像追加します。

無事にできました。ありがとうございます。

Answer 1

CSSフォルダのCSSファイルからimagesフォルダのimageファイルを参照するので、
../images/icon-pan-1.pngになります。

相対パス・ルートパス・絶対パスの違いを学習しておいたほうが、後々に役に立ちますよ。

Comments

[ramarama]

早速ありがとうございます。
そのあたりも検索して実行してみたのですが上手くできませんでした????
まだまだ知識が足りないってことですね。追い討ちありがとうございます。

そして、

a#icon-pen {
background-image: url("../images/icon-pan-1.png") no-repeat 16px center;
}

こちらにしてみましたが反映されませんでした・・・・

[FrontEnd_Japan]

CSSファイルの階層構造はどうなっていますか？

[FrontEnd_Japan]

background-image: url("../images/icon-pan-1.png") no-repeat 16px center;　ではなく、
background: url("../images/icon-pan-1.png") center 16px no-repeat;　です

background-imageはファイルパスしか指定できませんよ。
backgroundプロパティはオプションを指定する順番も決まっています。
https://developer.mozilla.org/ja/docs/Web/CSS/background

[FrontEnd_Japan]

あと、background-imageを表示する時は、width, heightの指定がないと表示されません。

[ramarama]

すみません。background: url〜にしてもダメだったので、、background-imageでも試していたところでした。
ご指摘ありがとうございます。

順番もあること知りませんでした。Udemyで学んだことをそのまましてました・・・・

CSSのファイルの中は、「styles.css」のみです。

[FrontEnd_Japan]

backgroundを表示したい要素にwidth, heightは指定されていますか？？？
これがないと画像が表示されないです。

[ramarama]

また、
background: url("../images/icon-pan-1.png") center 16px no-repeat;
で並び替えをしたところ、検証ツールでは打ち消し線が入ってしまいました。

background: url("../images/icon-pan-1.png") no-repeat 16px center;
では、打ち消し線はないのですが、画像が見当たらずです。
背景は白色なので、試しにバックグラウンドを黒にしたのですが、見つかりませんでした（無駄な確認かもしれませんが・・・）

[FrontEnd_Japan]

backgroundの順番の件は承知しました！
質問者様の当初の順番でも大丈夫です！表示される書式を優先しましょう！

backgroundの要素にwidth, heightを指定するのを試していただけますか？？

a#icon-pen {
width: 00px;　←　これを追加
height: 00px;　←　これを追加
background: url() no-repeat 16px center;
}

[ramarama]

細かくありがとうございます。

しかし、私のコードが汚いせいもあってか、ピンクの枠がビヨーンとのびました????

HTML
↓

<div id="nav-list">
<nav class="header-nav">
<ul>
<li><a id="icon-pen" href="#"><span class="text">会員登録</span></a></li>
<li><a id="icon-login" href="#"><span class="text">ログイン</span></a></li>
<li><a id="icon-hand" href="#"><span class="text">ヘルプ</span></a></li>
</ul>
</nav>
</div>

CSS
↓

.header-nav{
float: right; /*ピンクボックスが右寄せ */
margin-right: -30px;

}

.header-nav ul{
display: -webkit-flex;　　/*ピンクボックスが横並び！！*/
display: flex;
}

#nav-list ul li {
width: 145px;
/* display: inline-block;*/
background-color: #d6a0a0;
/* margin-bottom: 10px; */
border-radius: 15px;
margin-right: 30px;
}

#nav-list ul li a {
font-size: 16px;
text-decoration: none;
text-align: center;
line-height: 50px;
padding-left: 30px;
display: block;
letter-spacing: 0.04em;
}
a#icon-pen {
width: 20px;　
height: 20px;
background: url("../images/icon-pan-1.png") no-repeat 16px center;
}

私のよそうなのですが、{　このカッコの前がダメなのでは・・・と考えていますがどうも上手くいきません。ご指導願います。

[ramarama]

今の現状を画像を追加しました????‍♀️

[FrontEnd_Japan]

試しに頂いたコードをもとにCodepenにて確認してみました。
画像はサンプルのCDN画像に変更してみたところ、表示はされています。
もしかしたら画像パス or 画像名 or 画像自体に問題がありそうですね。
https://codepen.io/FrontEnd_Japan/pen/yLedYQO

[FrontEnd_Japan]

「icon-pan-1.png」ではなく「icon-pen-1.png」ではありませんか！？

フォルダのスクショでは「icon-pen-1.png」と表示されていますが、
CSSのコードでは「icon-pan-1.png」と表示されていますよ。

[ramarama]

画像追加しました。本当にありがとうございます。
どうやら、相対パス、絶対パスの知識が足りなかったのと、最終は自分の誤字でした。
おかげさまで前へ進むことができます。本当に感謝です。