ATOMで原因不明の青い網掛け

Question

前提・実現したいこと

CSSでHTMLで作ったページにヘッダーの背景画像を反映させたい。

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

ドットインストールでCSSで学習中です。
ATOMを使っているのですが、background-image:url(../img/header.png)と入力したところ、[./img]の部分に青い網掛けのようなものがかかっており、画像が反映されません

該当のソースコード

試したこと

ファイル指定に関するサイトを検索するなど、原因を調べたのですが解決には至りませんでした。

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

動画授業のため、映像と同じファイル名、保存の仕方、コードのスペル等は何度も見返しましたが、異なるスペル等は見当たりませんでした。

Comments

[dit.]

その状態のスクリーンショット等を提示することはできますか？

[0220JiatengGC]

回答ありがとうございます。
申し訳ございません。
スクリーンショットは用意できたのですが、提示の方法が分かりかねます。

[m.ts10806]

質問には画像をつけることができますので、質問本文を編集して画像をアップロードしてください。
上記のようなパスを提示されても質問者さんのローカルのファイルパスなので質問者さん以外見れません。

[m.ts10806]

↑
質問編集画面のマークダウンボタン群の左から6番目くらいの「画像の挿入」ボタンを押下→該当の画像を選択
だけでいいはずです。
正しく添付できたかどうかは質問編集画面右側の「プレビュー」を確認してください。

[0220JiatengGC]

ありがとうございます。
質問にスクリーンショットを挿入することができました。

[m.ts10806]

回答はしましたが、コードを提示する際はその箇所だけ切り取るのではなく、なるべくコード全体の流れがわかるものを提示してください。
（わからなければ全部提示してしまうのも手です）
そのコードで再現確認を行うわけですが、回答者が補完する内容が多いと正しい状態再現となりませんので。

Answer 1

コードそのまま提示いただいた方が良かったですね。

padding:10px /*←ここに;がない*/
background-image:url(../img/header.png);

Comments

[dit.]

そっちでしたか…

[m.ts10806]

コード全部提示してもらわないと分からなかったですね。
マークダウンのコードブロックでも同じように強調表示されたりします。

[0220JiatengGC]

ありがとうございます。
10pxの後に;を入れました。

dit.さんが先に回答していただいた{ }などの要素がないという回答をみて改善したところ、表示上では問題なく見えたのですが、headerの下の{ をheader{ とheaderの横に場所を移動したところ、なぜか青い編みかけが消えました。

10pxの後ろに;がない状態でも、以上の改善によって編みかけは消えていました。

こんな初歩的なミスに回答していただきありがとうございました。

[m.ts10806]

> headerの下の{ をheader{ とheaderの横に場所を移動したところ、なぜか青い編みかけが消えました。

これはどういう状態でしょうか・・・。
次のバグが発生してそうでこわいですね。

[0220JiatengGC]

おそらくheader{ }の{ が表示されていたのですが、反映されていなかったようです。
なぜこのようなことが起こったのかは分かりません。

[dit.]

私の回答にベストアンサーをいただいてます（1/11 16:50現在）が、おそらくセミコロンがないのが原因ですので、こちらの回答が正しいと思います。
{が次の行にあってもCSSとしては間違いではなかったと思うので…。
（ダメだったらどなたかツッコミください）

[m.ts10806]

えっと
header
{
を
header{
としたわけではなく、
そもそも{がなかったということでしょうか？

ただ網掛け云々はなしにしても、次の指定がある状態で;がないとそれ以降の指定は正しく動かないと思います。文法的にNGです。

OK
header{
padding:5px
}

NG
header{
padding:5px
margin:5px;
}
ご注意ください。

[0220JiatengGC]

header
{
を
header{
としました。

色々試してみたのですが、お二人のいうように; がないことが原因だったようです。

[dit.]

セミコロンの抜けとか、全角が入ってしまったとか、やりがちなんですよね。さらに自分では気づきにくいという…とりあえず解決されたようでよかったです。

[m.ts10806]

全角空白はよくありますね（質問でも全角空白入ってしまった系はよくでます）

Answer 2

あてずっぽうですが、body{}やp{}など要素が書かれていないのではないかと思います。
例として

body{
  background-image:url(../img/header.png);
}

は問題ないですが

background-image:url(../img/header.png);

しか書かれていないような状態の場合以下のようになりました。
（下は正しいもの）

Answer 3

CSSの文法エラーではないですか？
../img/header.pngは" "で囲む必要があります。

引用符なしでも文法上問題なかったです。
失礼しました。

Comments

[0220JiatengGC]

回答ありがとうございます。
動画の方では、" "で囲っていない状態でも反映されていました。
また、自分で検索した時に" "で囲うという情報にヒットしたため、試してみたのですが改善されませんでした。

[maisumakun]

url()の中身は、（引用符やカッコなど一部使えない文字はありますが）引用符なしで書くことも可能です。

https://drafts.csswg.org/css-syntax-3/#url-token-diagram

[dice142]

引用符なしでも書けたんですね。。。（初めて知った）

回答取り消し線で訂正しておきます。