私のホームページの最初の<div>
に背景画像を追加しようとしています。私はブートストラップ4とカスタムstyle.cssファイルを使用しています。CSSで背景画像を宣言していますが、背景画像が表示されません。
私のHTMLは次のとおりです。
<body>
<div id="wrapper">
<nav class="navbar navbar-expand-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" id="text">
text
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent navbar-selections">
<div id="select-container">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
</div>
<div id="phone-number">
<ul>
<li class="nav-item">
<a class="nav-link" href="#">555.867.5309</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="index-intro">
</div>
と私のCSSは以下の通りです:
.index-intro {
background: url(img.JPG);
background-repeat: no-repeat;
background-size: 100% 100%;
}
しかし、私の背景画像は、上部のナビゲーションバーでちょうど白い画面が表示されません。私は非常に混乱していて、いくつかのアプローチを試してみました。例えば
、私は以下のようにdivの内側に画像を置く場合:
<div class="index-intro">
<img src="img.jpg">
</div>
これは、ページ全体を占め、ナビゲーションバーの上に重なっています。
div内にnavbarが含まれていると、ナビゲーション画像内に背景画像が表示され、残りのページは空白になります。
ページの残りの部分のナビゲーションバーのすぐ下に背景イメージを作成する方法に関するアイデアはありますか?
背景:url( "img.JPG");二重引用符を使用し、画像パスが正しいことを確認してください。画像は要素ではなく背景として機能するので、コンテナの幅と高さについて言及してください。 –