Combining Text and Images with a Background Video using CSS

I need help replicating a unique design I came across in a graphic design mockup. It involves a background video with a transparent green overlay, an image of a man fixed to the right side, and text flowing over it. I've managed to recreate most of it using bootstrap, but there are still some issues, especially with keeping the image fixed. Any tips or alternate methods would be greatly appreciated.

Here is the original mockup I'm trying to emulate in CSS: https://i.sstatic.net/cRwBr.png

And here's the code snippet from my attempt:

*::before, *, *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.jumbotron {
  position: relative;
  overflow: hidden;
  // More CSS styles...
}
// More CSS styles...

HTML body content goes here...

You can view the full code on jsFiddle.

cssbootstrap-4

Answer №1

Initially, in the jsfiddle demonstration, there was an absence of Bootstrap 4 despite it being mentioned in your query.

To achieve the styling for the person's image in the backdrop, you can apply a similar approach as done with the video and overlay: position it absolutely, aligning it to the top, bottom, and right edges to secure it on the right side. Ensuring its height is set to 100% will prevent any overflow within its relative parent container.

In efforts to enhance the layout, I have reorganized elements and designated custom CSS classes for better styling manipulation:

<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>

The subsequent CSS snippet showcases how to affix the person's image in the background:

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

https://i.sstatic.net/soT3v.png

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the width of the dropdown menu to match the text input field using jQuery

Struggling with jquery-mobile to collect user information, I am facing an issue aligning the width of my select menu with the text input fields. Despite successfully matching the background and border colors of the select menu with the text input fields, ...

jqueryhtmlcssjquery-mobile

Is there a way to seamlessly incorporate a PHP tag into a Bootstrap dropdown for perfect alignment?

In relation to this query: I have successfully integrated the if/else statement into the dropdown without any issues. However, upon using the dropdown on the website, I noticed that the item generated by the if/else statement – in this case, "log in" or ...

phphtmlcssbootstrap-4

Tips for including input text in a select option dropdown menu

Can someone guide me on adding an input text box to a select dropdown in Javascript and utilizing it as a search filter? <select class="form-control"> <option value="trans">Trans</option> <option value="fund">Fund</opt ...

javascriptselectbootstrap-4dropdown

Activate browser scrollbar functionality

Below is the HTML code snippet: <html> <head> <style> #parent { position : absolute; width : 500px; height : 500px; } #top { position : absolute; width : 100%; height: 100%; z-index : 5; } #bottom { position : absolute; width : 100%; ...

javascripthtmlcss

CSS Problem with Image Overlapping

Attached is an image that I would like to design in HTML. It has been quite successful, but when testing it on different resolutions, the red box seems to move around. The design was created with 100% width and height. <style type="text/css"> ...

htmlcss

When you hover over the page, the content shifts to reveal a hidden div

Trying to figure out how to show additional content when a photo is hovered over without shifting the rest of the page's content placement? Looking for alternative solutions rather than using margin-top: -22%. Here's a link to the website in que ...

javascriptjqueryhtmlcss

Design: Seeking a layout feature where one cell in a row can be larger than the other cells

To better illustrate my goal, refer to this image: Desired Output <\b> Currently, I'm achieving this: current output Imagine 7 rows of data with two columns each. The issue arises in row 1, column 2 where the control needs to span 5 row ...

htmlcssangular

Fluid overlap of divs in Bootstrap framework

I am currently in the process of making style adjustments to a website at One specific change I've made is adding a top bar image. However, I've encountered an issue where the top bar graphic overlaps the navigation when the page is resized too ...

htmlcssgithub-pages

Unable to align my navigation bar in the center

My navigation bar code is not centering on the website. Even after removing float: left, it doesn't move to the desired position. Can anyone help me with this issue? Thank you. css ul#list-nav { list-style: none; margin: 20px auto; paddi ...

htmlcss

Ninja Flip ComboButton

I am looking to enhance the functionality of a toggle button within a web application that was developed using the JS Dojo API. Currently, the button is utilizing dijit.form.ToggleButton, but I need it to include an additional feature for a dropdown menu w ...

htmlcssdojo

Incorporating a class into ever-changing Bootstrap Table rows

Looking to enhance my table rows with a class, excluding the header. Struggling to find a way to do this. Any ideas? This is the table in question: <table id="table" class="hidden table table-bordered table-striped table-hover"> <thead> ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Adjusting the height of a div inside a Material-UI Grid using Styled Components

When the mouse hovers over the two cells highlighted in pink, they turn pink. Is there a way to make the entire grid fill with pink when hovered over, both width and height at 100%? Check out the sandbox here ...

cssmaterial-uistyled-components

What is the proper way to apply a background color to the entire body using CSS?

I'm facing an issue with getting the background color to cover the entire body of my webpage. Currently, it only captures a certain size and when there is scrolling on the window, two shades of colors appear. I want the background color to span the en ...

htmlcssangular

What are some ways I can enhance the typography within Material UI?

Currently, I am in the process of developing a custom theme utilizing createMuiTheme. However, my application requires more typography variants than what Material UI provides out of the box. I need to extend the typography so that it aligns with my specifi ...

cssreactjstypescriptmaterial-uinext.js

Responsive design is achieved through the use of mobile media

I am seeking assistance with optimizing my website for mobile devices as it currently displays like the image below. Here are the solutions I have considered so far: Duplicating the 680 lines of CSS within the same document between @media only screen ta ...

htmlcssmobileresponsive-design

Is it necessary to capitalize the first letter only when it's not at the beginning of a sentence?

To separate a lengthy string, I followed the approach outlined in this post: .line { display: inline-block; } <p> <span class="line">This text should break</span> <span class="line">after the word "break"</span> </ ...

htmlcss

Is it possible to generate a table without any grid lines present?

Currently, I am in the process of designing a table that will function as a popup when a link is clicked within my imported SQL table. An example of this table is included with this message for reference. After conducting thorough research, I attempted to ...

htmlcssbootstrap-4bootstrap-modal

Cannot retrace steps in file tree using ../

My website has a file structure set up like this: css style.css other files... templates index.html other files... I am attempting to reference the style.css file from my index.html document. My initial attempt was to navigate back a directory u ...

pythonhtmlcsspostgresqlflask

Dropping and dragging in the Dojo for the nested lists

Within my HTML code, I am using the Dojo drag and drop feature to sort attributes and move them to another section. However, I am having trouble figuring out how to sort the sections themselves. Here is the structure that I have created: <ul accept=" ...

javascripthtmlcssdojodrag-and-drop

Applying box shadow to input group addon in Bootstrap 3 using CSS

What I am trying to achieve is that when I click on the inputbox or selectbox, the box shadow defined in my CSS should also cover the input-group-add-on feature in Bootstrap 3. The issue I'm facing is that the input-group-add-on does not display the ...

htmlcsstwitter-bootstrap-3