ナビバーとショーケース/ジャンボトロンをカバーする画像を取得しようとしています(1つの背景色でテストしました)。ただし、navbarとjumbotronを囲むdivを作成し、これに背景画像を割り当てたとしても、両方を正しくカバーすることはできず、navbarはそのまま残されます。
さらに、写真を試してみると、ショーケース全体でかなりランダムに引き伸ばされますが、これをどのようにして要素を正しくカバーするのですか?(画像サイズは1400x693 svgです)
<header class="nav-header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<a href="#"><span class="navbar-brand"><i>Logo</i></span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse"
aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">How it works</a></li>
</ul><!--//nav-->
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Profile</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-success" href="#">Log out</a>
</li>
</ul>
</div>
</div>
</nav><!--//header-->
</header>
<section>
<div class="showcase">
<div class="container">
<div class="jumbotron jumbotron-fluid showcase-content text-white">
<div class="row">
<div class="col-lg-6">
<h2 class="display-4">Some title.</h2>
<p class="lead">Some additional showcase text.</p>
<p>
<a class="btn btn-secondary text-white " href="#">Get Started -></a>
</p>
</div>
<div class="col-lg-6">
<image></image>
</div>
</div>
</div>
</div><!--//container-->
</div>
</section><!--//promo-->
Css
.showcase {
background-color: red;
background-size: cover;
}
.nav-header {
background-color: transparent;
}
.showcase-content {
background-color: transparent;
}
コードペン:
https://codepen.io/anon/pen/vjqvEE
関連した質問
- グリッドレイアウトに関係なくボタンを配置しますbootstrap4
- ブートストラップコンテナ付きの半角背景画像
- ブートストラップ4を使用してボタンの内側にスパンを垂直方向に中央揃えする方法
- 流体コンテナの行にマージンを追加すると、1つのdivが下にシフトしてそれを防ぐ方法はありますか?
- ラベルの配置。同じ高さ。ブートストラップ4:フォーム
- カラムを強制的に右側に配置します(フロート右)
- モーダルのはるか外側に伸びるDiv、内側にとどまってスクロールしたい
- ナビゲーションバーの横にあるフロートテキスト
- Bootstrap行が要素にパディングを追加するのはなぜですか?
- CSSBootstrapのWebサイトナビゲーションバーにドロップダウンボタンのドロップダウン効果を作成できません
問題はnavbar内でbg-lightを使用していたため、色をnavbarに割り当てることよりも優先されていました。