background-imageの適用範囲について(bootstorapとcss併用)

Question

bootstrapを併用したhtmlの勉強中です。
サイトの模写をしていたのですがbackground-imageの指定している場所に疑問を感じ質問させていただきました。
下記のコードの部分が疑問に感じたところです。

<!--- Start Resources Section -->
<div class="offset" id="resources">

<div class="fixed-background">


<div class="row dark text-center">
		
	<div class="col-12">
		<h3 class="heading">Built With Care</h3>	
		<div class="heading-underline"></div>
	
		
	</div>

	<div class="col-md-4">
		<h3>HTML 5</h3>
		<div class="feature">
			<i class="fas fa-code fa-3x"></i>
		</div>
		<p class="lead">Built with the latest, HTML 5</p>
	</div>

	<div class="col-md-4">
			<h3>BOOTSTRAP 4</h3>
			<div class="feature">
				<i class="fas fa-bold fa-3x"></i>
			</div>
			<p class="lead">Built with the latest, BOOTSTRAP 4</p>
		</div>

		<div class="col-md-4">
				<h3>CSS 3</h3>
				<div class="feature">
					<i class="fab fa-css3 fa-3x"></i>
				</div>
				<p class="lead">Built with the latest, CSS 3</p>
			</div>

</div><!--End Row Dark-->

		<div class="fixed-wrap">
			<div class="fixed">		
			</div>
		</div>
</div><!--End Fixed Background-->

</div>

.fixed{
  background-image: url(img/apple.png);
  z-index: -1;
  }
}

div(fixed)にbackground-imageを指定すると画像が#resourcesの範囲全体に表示され、画像にfixedが指定されているよに画像が固定されます。（スクロールすると画像が固定されている）
何故このような挙動になるのか疑問に思い質問させていただきました。
#resourcesや.fixed-backgroundにbackground-imageが指定してあれば画像が表示されるのは理解できるのですが・・・
試しに#resourcesや.fixed-backgroundにbackground-imageを指定してみると画像は表示されるのですが、スクロールすると画像も一緒に動いてしまい、.fixedに指定した時とは表示のされ方が異なります。
表示のされ方が異なる理由も教えていただければ幸いです。

Comments

[yasutomi]

bootstrap.min.cssなどの読み込む必要があるファイルが
記載されていないのは不親切なので追加したほうが良いです。

Answer 1

よく確認すると、ほかにもcssがあることがわかりました。
そこに記述があり、疑問は解決しました。

Answer 2

CSSの括弧がおかしいので表示もおかしくなっている
ような気がします。

.fixed{
  background-image: url(img/apple.png);
  z-index: -1;
  }
}