### 前提・実現したいことドットインストールでCSS学習中（第９回）背景画像を表示したい htmlでは画像は正確に表示されていた ![イメージ説明](849f14c17b3a5ff42a68c07ac269129d.png) imgフォルダ内にheader.png https://teratail.com/questions/178413 以前同様の質問者への回答に目を通しました。 ### 発生している問題・エラーメッセージ![イメージ説明] CSSで指定した画像を表示させたい・ ### 該当のソースコード ```html 太郎のポートフォリオサイト h1 { color: red; } --> HOME ABOUT --> ```css header { background-color: pink; text-align: right; /* ↑右揃え */ padding: 10px; background-image: url(../img/header.png); height: 240px; } ``` ### 試したこと画像やフォルダ名の入力ミスを避けるためにコピペで指定 header.pngをCSSフォルダ内にいれ、 background-image: url(header.png); 保存と再読込するも画像が表示されない。 htmlがあるmyphortfolio内にheader.pngを移し、 background-image: url(../header.png); これも表示されない。

css background-imageでの画像がうまく表示されない。

前提・実現したいこと

ドットインストールでCSS学習中（第９回）
背景画像を表示したい
htmlでは画像は正確に表示されていた

imgフォルダ内にheader.png

https://teratail.com/questions/178413
以前同様の質問者への回答に目を通しました。

発生している問題・エラーメッセージ![イメージ説明]

CSSで指定した画像を表示させたい・

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>太郎のポートフォリオサイト</title>
6  <link rel="icon" href="favicon.ico">
7  <meta name="description" content="太郎のポートフォリオサイトです。">
8  <!-- <style>
9  h1 {
10    color: red;
11  }
12</style> -->
13<link rel="stylesheet" href="CSS/styles.css">
14</head>
15<body>
16  <header>
17    <!--
18    ol:ouder list
19    ul:unouder list
20    li:listitem
21    -->
22    <nav>
23      <ul>
24        <li>
25          <a href="index.html">
26          HOME
27        </a>
28        </li>
29        <li>
30          <a href="about.html">
31          ABOUT
32        </a>
33        </li>
34      </ul>
35    </nav>
36    <!-- <img src="img/header.png" width="400" height="130" alt="ヘッダー画像"> -->
37    <!-- cssのheaderで指定し直す -->
38</header>
39
40```css
41header {
42background-color: pink;
43text-align: right;
44/* ↑右揃え */
45padding: 10px;
46background-image: url(../img/header.png);
47height: 240px;
48}
49

試したこと

画像やフォルダ名の入力ミスを避けるためにコピペで指定
header.pngをCSSフォルダ内にいれ、
background-image: url(header.png);
保存と再読込するも画像が表示されない。

htmlがあるmyphortfolio内にheader.pngを移し、
background-image: url(../header.png);
これも表示されない。

hatsu

2019/07/15 13:58

例えば、こんな画像とかだと表示はされます？ https://www.pakutaso.com//shared/img/thumb/eltuneko9V9A9721_TP_V.jpg

imakara

2019/07/15 14:02

絶対パスで正しく表示されました。

hatsu

2019/07/15 14:11

うーん、僕の環境では同じような構成で正しく表示されました。。拡張子もpngであってますよね？

imakara

2019/07/15 14:21

何故かわかりませんが、確認のために絶対パスで指定した行を、自分が投稿した該当コードをコピペで上書きして、chromeにhtmlをドロップしてみたらheader画像が正しく表示されました。そもそも該当コード自体atomからのコピペなので何も環境に変化はないはずですが・・・。あえて違いを上げるなら一度PCをシャットダウンしてつけ直したことと、htmlをリロードではなく再度ブラウザ上にドロップしたことでしょうか。過去同様の質問をされた方と同じでなにかよくわからないけどできるようになったようです。