Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Full Page Background Image

by Michal Szymanski,

Final result preview
Live preview

1. Open index.html file in your project folder (the folder where you have unzipped MDB package).


2. Navigation

In the beginning, we'll create a navigation. Go to the section NAVBARS in MDB documentation and copy the code of Basic Navbar. Then paste it below opening <body> tag.


 <body>


    <!--Navbar-->
    <nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapseEx2" aria-controls="collapseEx2" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">
                <strong>Navbar</strong>
            </a>
            <div class="collapse navbar-collapse" id="collapseEx2">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">Pricing</a>
                    </li>
                    <li class="nav-item btn-group">
                        <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <a class="dropdown-item">Action</a>
                            <a class="dropdown-item">Another action</a>
                            <a class="dropdown-item">Something else here</a>
                        </div>
                    </li>
                </ul>
                <form class="form-inline waves-effect waves-light">
                    <input class="form-control" type="text" placeholder="Search">
                </form>
            </div>
        </div>
    </nav>
    <!--/.Navbar-->

We have to make one significant change in the Navbar's code.

Add a class .fixed-top to the Navbar


    <!--Navbar-->
    <nav class="navbar navbar-toggleable-md navbar-dark bg-primary fixed-top">

As you can expect, that makes our navbar stuck to the top of the screen. It will be visible all the time, even when you scroll down your page.


3.Full-page background image

Now it's time for something spectacular. Let's create a full page background intro for our landing page.

Paste that code below the Navbar:


<!--Mask-->
<div class="view">
    <!--Intro content-->
    <div class="full-bg-img flex-center">
        <ul>
            <li>
                <h1 class="h1-responsive">Material Design for Bootstrap 4</h1></li>
            <li>
                <p>The most powerful and free UI KIT for Bootstrap</p>
            </li>
            <li>
                <a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg">Sign up!</a>
                <a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg">Learn more</a>
            </li>
        </ul>
    </div>
    <!--/Intro content-->
</div>
<!--/.Mask-->

Let me explain how the code above works.

.view is a wrapper for our background image, which let us add a mask to it. Thanks to mask we can make our image darker or lighter, which helps us make your content more visible.

.full-bg-img is an element with absolute position, which makes it cover our background image. And because it covers the image, we can use it as a mask and manipulate the colors.

.flex-center aligns our content exactly in the middle of the screen.

Content within ul is our "Call to action" element, which let users know, what action we expect from them. You can place there whatever you want.

.h1-resposnive makes our heading look good on all kind devices because it adjusts the font size to the screen size.


When you save the file and refresh your browser, you will notice that nothing has changed. That because we need some CSS code to make it working.

Firstly, we'll use a separate CSS file for our custom styles. Open a file style.css (in "CSS" folder) and paste that code:


html,
body,
.view {
    height: 100%;
}

.view {
    background: url("https://mdbootstrap.com/images/regular/city/img%20(17).jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

We set height: 100% to all the parents element of our background image, because only that way we can cover with the image the entire screen.

We set to the .view a proper URL path for the image. You can use whatever image you want.

Then, we give a value cover to the background-size property. That makes the image cover all the available space on the screen.

-webkit-, -moz- and -o- make sure our code works properly with all the browsers.

Save the file and open it in your browser. You will see a beautiful image covering your intro. There are a few things which we should improve, but we'll take care of it in the next lesson.

In order change the background image you just have to change the URL path. You can provide a link to the image on your server or path to the source file within your project's files, for example: url("/img/imageName.png");


Small tip at the end:

You can use whatever image you want, but there are a few rules which you should follow.

Your image should be big enough to keep the quality and as lightweight as possible to don't increase a page load time. That's why I recommend you prepare your picture as follows:

1. Resolution: 1920px / 1280px

2. JPG file format

3. Compress the file (you can use COMPRES JPG tool)


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author


User avatar

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst.

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more