Layering Text and Images on background video css

First of all, in your jsfiddle demo, it seems like you didn’t include Bootstrap 4 but you tagged Bootstrap 4 in your question.

To style that person picture in the background, you can just do the same way you did on the video and the overlay: set its position to absolute, top, bottom and right to 0 so that it sticks on the right. I think the tricky part is to set its height to 100% so that it won’t overflow its parent relative container.

Anyway, I’ve cleaned up the layout a little bit and assigned several custom CSS classes so that I can style those classes instead of directly on the elements:

<div class="jumbotron jumbotron-fluid banner">
    <div class="overlay"></div>
    <video />
    <img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png" 
      class="img-background" />
    <div class="banner-content container-fluid">
        <div class="showcase">
            <img id="heyGoodMeeting" 
              src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png" 
              class="img-fluid" />
            <p class="description" />
            <a class="btn btn-light btn-lg" />      
        </div>
    </div>
</div>

And the following is the CSS to stick that person picture in the background:

.banner .img-background {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
}

enter image description here

demo: https://jsfiddle.net/davidliang2008/xd2s630q/80/

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top