background-imageが表示されない

先に画像を掲示します


自分はドットインストールを使って学習をしています。現在CSSを学んでいるのですが、動画のように真似しても、ヘッダーにbackground-imageの画像が出てきません原因がしりたいです！

Lhankor_Mhy

2019/07/30 10:27

コードをご提示ください。

yambejp

2019/07/30 11:03

質問に画像でコードを貼り付けるのはナンセンス。もしそうするならcodepenなど適当なところにソースをのせてください本来であれば質問にテキストベースのソースを貼るべき

m.ts10806

2019/07/30 11:35

>先に画像を掲示しますいえ、先に「実現したいこと」を書くべきです（質問テンプレートを参照）

退会済みユーザー

2019/08/01 20:29

ごめんなさい！回答を先に見てこちらを見るのを今の今まで忘れていました。。。ほんとうにごめんなさい！teratailの使い方の理解不足で不快な思いをさせてしまったことを本当に申し訳ないと思っています。悪気はほんとうにないのです。画像を見せるのが一番早く相手に伝わってもらう方法だ！と、勘違いしていました。次からはちゃんとします。

m.ts10806

2019/08/01 20:37

「質問するときのヒント」のページを読むと良いですよ。あと質問は編集できますので適宜ご対応ください

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

回答3件

ベストアンサー

実はすでに画像の表示には成功している可能性があります。
（画像が大きくて端の灰色部分しか見えていない）
作業を進め、background-size: cover;を付ければ解決しそうです。

投稿2019/07/31 00:37

dit.

総合スコア3235

退会済みユーザー

2019/07/31 00:58

いけました！ありがとうございます！

dit.

2019/07/31 01:23

以前teratail内で同じ原因で詰まっていた質問を見た記憶があります。背景色の「pink」が見えなくなっている→背景画像の灰色が見えている　に気が付くと解決できる内容かなと思います。

退会済みユーザー

2019/08/01 20:39

なるほどです！たしかに言われてみれば超納得ですw

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

backgroundのUrlが「自分のパソコンの中の、imgというフォルダの中の、header.pngというファイル」という意味の指定方法になっています。

自分が表示させたい画像のUrlになっていないために表示されないのだと思います。
表示させたい画像の「パス」を記入してみてください。
パスは「絶対パス」と「相対パス」という書き方があり、今回はどちらでも大丈夫だと思うので、どちらかのワードでググって書いてみてください。
(現在入力中の書き方は「相対パス」です)

ドットインストールは、ある程度わかってる人に向けての動画が多くて、初学には辛いところが多いですよね。

投稿2019/07/30 23:54

H40831

総合スコア973

退会済みユーザー

2019/07/31 01:01

そうですね。初学でドットインストールの進行速度だと深く理解しながらは難しいですね。今度相対パスと絶対パス見ときます！background-size: cover;で一様問題解決はできました！回答ありがとうございます！

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

あまり関係がないかもしれませんが、CSSを

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

にしてみたらいけるかもしれません。(テスト済み)

私のサイトのbodyはこれで読み込めているのですが...

css
1body{
2  transition-duration:0.5s;
3    font-size:1.6rem;
4    line-height: 2;
5    background-image: url(../img/background-img.png);
6	background-position: left top;
7	background-repeat: no-repeat;
8  background-attachment: fixed;
9}