cssの背景コードがおかしい

前提・実現したいこと

どっとインストールで背景画像の設定のコードを入力しているのですが
background-image:
url(../img/header.png);
height: 240px;
としても背景色のピンクがなくなるだけで画像が表示されません
background-size: cover; とすると画像が表示されるのですが
本来の役割である画像の大きさの調整をしてくれません
何故このようなことが起きる原因と対処法を教えていただきたいです

今やっているチャプター
https://dotinstall.com/lessons/basic_css_v4/45209

HTML

<!DECTYPE html>

<html lang="ja">
<head>
<meta charset=utf-8>
<title>太郎のポートフォリオサイト</title>
<link rel="icon" href=favicon.ico>
<meta name="description" content="太郎のポートフォリオサイトです">
<link rel="stylesheet" href="css/styles.css">
</head>

<body> <header> <nav> <ul> <li> <a href="index.html"> HOME </a> </li> <li> <a href=about.html> ABOUT </a> </li> </ul> </nav> </header>

CSS

header
{
background-color: pink;
text-align: right;
padding:10px;
background-image:
url(../img/header.png);
height: 240px;

   }

header  ul {
margin:0px;
list-style-type: none;
padding-left: 0px;
}
header  a{
display:inline-block;
padding: 4px 8px;
font-size: 12px;
}

  header li > a{
  text-decoration: none;
  color:inherit;

}

header li >  a:hover{
  color:royalblue
}

dit.

2019/06/04 07:13 編集

直接関係なさそうですがDOCTYPE宣言が間違ってます。 <!DECTYPE html>→<!DOCTYPE html> ここから追記-- 2019/06/04 15:28AyumuShigetaさんの回答へのコメントに提示のキャプチャの灰色の部分が該当の画像なのでは？高さや幅を変更しているのは<header>に対してなので、背景画像の大きさは変更していないはずです。画面サイズその他で文字部分が見えていないだけかも。あと、header li {とすべきところがheader a{になってるのでメニューが横並びになっていませんね。

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

回答2件

ベストアンサー

画像のサイズの問題じゃないでしょうか？
左上の頂点で固定され要素のwidth,heightで指定した範囲を表示します。

今回の場合だとアイコンのサイズが大きすぎて画像の灰色の部分しか写ってないということかもしれません。

background-size:auto 100%;を追加してみるとアイコンが見えるようになると思います。

background-sizeは要素の背景をどのように埋めるかの指定で、coverを指定することでアス比を固定しより大きい辺を優先にサイズを調整してくれます。

投稿2019/06/04 06:59

zushi0905

総合スコア683

yuu1226

2019/06/04 07:40

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

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

background-size: coverでは画像サイズを自動で拡大縮小しているようです。
background-size

headerのwidthはどうなっていますか? (検証ツールで確かめて見てください)
仮にwidthが0 だと、幅が0だと解釈されるので画像は表示されません

css
1header
2{
3  background-color: pink;
4  text-align: right;
5  padding:10px;
6  background-image:
7  url(../img/header.png);
8  height: 240px;
9
10  width: 100%;
11}