background-imageが反映されない

Question

前提・実現したいこと

Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3

の動画にてbootstrapを勉強中です。

fixed backgroundの部分が反映されず困っています。

試したこと

HTMLは動画のままで、
動画の中にbackground-imageの記述が見当たらなかったので、CSSの方は自分で入力したものです。

<!--- Fixed background -->
		<figure>
			
			<div class="fixed-wrap">
				<div id="fixed">
			
				</div>
			</div>
		</figure>

.fixed-wrap{
  height: 500px;
  width: 100%;
  z-index: -1;
  background-attachment: fixed;
}
.fixed{
  background-image: url(./img/mac.png);
}

初心者で聞く人もおらず行き詰まっています。
よろしくお願いします。

Comments

[s8_chu]

背景画像や、 html ファイルを含む現在のディレクトリ構造をツリー形式で教えていただけませんか？

[s8_chu]

また、質問文に掲載いただいたコードは動画中の断片のように見受けられますが、実際に質問者さんが進めた箇所までを追記していただくことは可能でしょうか？

Answer 1

今回の場合、当該チュートリアルの則るのであれば、クラスを用意する必要はありません。なぜならば、それらはチュートリアル開始時にダウンロードするファイル内の style.css 下部で、以下のように宣言されているためです。

/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

よって、もしこれらのスタイルが反映されていないならば、少なくとも以下の可能性を考える必要があります。また、当該チュートリアルのコードを jsFiddle 上で動作させたところ、正常に動作することを確認しました (動作確認用リンク)。

• style.css の当該スタイルの宣言を誤って消してしまった……この場合、スタイルが書かれている CSS ファイルをもう一度ダウンロードするなどの方法で再度スタイルを適用してください。
• キャッシュの影響で反映されていない……この場合、キャッシュの消去を試してみてください。
• 現在閲覧しているファイルと編集しているファイルが異なっている……この場合は、閲覧と編集を行っているファイルを一致させたうえで動作確認を行ってください。

Comments

[sujiko_life]

回答ありがとうございます。
下の方に記述があるのに気付いてませんでした・・・
おかげ様で解決することができました！
本当にありがとうございます！！

Answer 2

id="fixed"なのでCSSセレクタは#fixedです。
ただし、これは今回は関係ないです。
background-image は .fixed-wrap の方に設定すべきです。

.fixed-wrap{
  height: 500px;
  width: 100%;
  z-index: -1;
  background-image: url(./img/mac.png); 
  background-attachment: fixed;
}
#fixed{
}

Comments

[sujiko_life]

回答ありがとうございます！
idなのに.なっているの気がつかなかったです。
教えてくださってありがとうございます。

Answer 3

<img class="img" src="./img/mac.png" alt="img"></img>

のようにhtmlに記述して、

.img {
z-index: 10;
}

のように編集するのがベストではないでしょうか。

Comments

[sujiko_life]

回答ありがとうございます。
表示することができました！