Search⌘ K
AI Features
Home
Courses
Bootstrap 4 Layouts in Depth

Adding a Background Image

Explore how to add a fullscreen background image to a Bootstrap layout by inspecting and copying HTML and CSS from an official theme. Understand techniques for centering text vertically and refining styles using DevTools to enhance your web page design.

We'll cover the following...

Adding the background image

We’ll be adding a large photo in the background. Again, we’ll use DevTools to find the HTML element to copy. 

Besides the HTML for the background image, we’ve also used the "Styles" panel to find the CSS used to get the effect of the image covering the whole screen and copied the CSS styles. They are inline on the element for now. Once we’ve updated the layout completely, we can move these inline styles to their proper CSS classes. However, doing that right now would slow things down for us. 

HTML
<section class="section section-top section-full">
      <!-- Cover -->
    <div class="bg-cover" style="background-image: url(https://www.educative.io/udata/1kdPP0rMGBg/Business.jpg);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;">
    </div>
    </section>

Right now, our layout looks like this.

Removing

...