html - Bootstrap 4 Background Carousel half page -


i having issues trying implement carousel using bootstrap 4. want half of screen show carousel, navbar, header, , subheader staying same each image like so

i trying make each div contain background image so. however, header text still appears below carousel , not on top of image.

html

               <div id="carouselexampleindicators" class="carousel slide" data-ride="carousel">                     <div class="carousel-inner" role="listbox">                         <!-- slide 1 - set background image slide in line below -->                         <div class="carousel-item active" style="background-image: url('https://i.imgur.com/x4vg8xy.png')">                         </div>                         <!-- slide 2 - set background image slide in line below -->                         <div class="carousel-item" style="background-image: url('https://i.imgur.com/wgenbzk.png')">                         </div>                         <!-- slide 3 - set background image slide in line below -->                         <div class="carousel-item" style="background-image: url('https://i.imgur.com/wgdnbzk.png')">                         </div>                     </div> 

css

.carousel-item {   min-height: 45vh;   background: no-repeat center center scroll;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover; } 


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -