Github 画像アップ時のfixed.cssエラー対処方法

Question

解らなく、質問させて頂きます。

Bootstrap(https://youtu.be/V_lAhqLXT9A)を模写し、Github無料版からアップロードしようと思いましたが

fixed.cssがエラーになり、style.cssで設定している「background-imge: url()」が表示することができません。

試しに、ローカルでfixed.cssを消してアップロードしましたが、「background-imge: url()」が反応しなかったので、
fixed.cssが問題あるのかなと思います。

Google検証のcssは特にエラーも見当たりません。
画像もindex.htmlと同じ階層に置いてあるので、cssでの表記も間違いないと思います。
![```.home-inner {
background-image: url(computers.png);
background-size: cover;
opacity: .9;
width: 100%;
height: 100%;
}

「background-imge」は固定の背景画像にしてます。

助言など頂けたら幸いです。
よろしくお願い致します。

Answer 1

質問文の間違い？

background-imgeとなっていますが、background-image の間違いですか？
コード上でbackground-imgeとなっていましたら、修正してください。

CSSが読み込まれない

fixed.cssについてですが、サイトのコードを拝見させていただいたところ、パスが違います。
fixed.cssが読み込まれるようにするには
<link rel="stylesheet" href="css/fixed.css">
を以下のようにしてください。
<link rel="stylesheet" href="fixed.css">

画像が表示されない原因

画像が表示されない原因としては、style.cssの以下のところでwidthとheightがともに100%になっているからです。
100%というのはこの要素を包んでいる要素の大きさを表しますが、どこにも具体的な大きさが指定されていません。
height: 100pxにするなど具体的な値を指定するか、これを包んでいる要素の大きさを具体的に指定してください。

.home-inner {
  background-image: url(computers.png);
  background-size: cover;
  opacity: .9;
  width: 100%;
  height: 100%;
}

また、background-image: url(computers.png");となっているところをbackground-image: url(computers.png);に直してください。

Comments

[timome-freework]

ご丁寧な説明ありがとうございます。
ご指摘通りにしましたら、掲載できました。
https://timome-freework.github.io/timi.github.io/

見落とし部分、記述ミスが原因ですね。

ありがとうございました。