Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Full Page Background Image

Full Page Background Image


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


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 19

  • User avatar

    Bartłomiej Malanowski

    @viveksharma, make sure that path to your image is valid. Keep in mind that every image on your website must be public accessible from the web

  • User avatar

    viveksharma

    Sir, I cannot add a different image. The image is on my PC and I want it on the page. The changing URL thing is not working.

  • User avatar

    Kamil Paciepnik

    Hi Jonecir, currently we do not support Vue, but in the future it will change.

  • User avatar

    Jonecir

    How can I make this demo work on VueJS 2.0?

  • User avatar

    Kamil Paciepnik

    Hi Siyad, please write an email to me with a detailed description of your problem. My e-mail k.paciepnik@mdbootstrap.com

  • User avatar

    Siyad

    not working for navbar developer code is used pls replay for this problem

  • User avatar

    Kamil Paciepnik

    Hi nicraM, please write to me e-mail with the problem - k.paciepnik@mdbootstrap.com.

  • User avatar

    nicraM

    If I try to add any div with "row" class, full background is crashed. right margin is added.

  • User avatar

    Michal Szymanski

    Yes, it is responsive. Parallax is just additional effect, you can easily remove it.

  • User avatar

    Venktesh

    Is this responsive?? why the background image is having a parallax effect?

  • User avatar

    Efren

    Tiny JPG makes a better job

  • User avatar

    Bartłomiej Malanowski

    Bootstrap is a free open-source web framework. It's a powerful tool that provides you a lot of best-practice solutions. The problem with Bootstrap is that you still need to write a lot of code to make your website beautiful. MDBootstrap resolves this problem. We created a lot of components and ready-to-use classes that you can use. You can learn more about Bootstrap and Material Design on "About MDB" page.

  • User avatar

    Saugat Aryal

    I have been using MDB quite recently for the time being and the components are amazing. But I have a silly question here. Can you please explain in simple terms, about what exactly is the difference between MDB and Bootstrap ??

  • User avatar

    Michal Szymanski

    Hi. Can you provide any screen with the bug? Does it work fine for you with other browsers?

  • Pratham Sawant

    Hi , i was trying to implement this example on Safari Version 8.0.7 (10600.7.12) ".flex-center" doesn't seems to be working and its same with the Live Preview, So can you please confirm what could be wrong , is there any tweak required to be done ?

  • User avatar

    James

    Finally it worked after doing some more effort. Thanks you for the good work you are doing Michal Szymanski

  • User avatar

    James

    Hello. I am not sure as to why my image fails to display. However, am trying to figure out whats happening.

  • User avatar

    Michal Szymanski

    It's explained in the next lessons

  • Anuar Raad Licona

    Not working correctly, when the page down the navbar maintain transparent

Leave a reply

Anonymous User

Bootstrap tutorial

0%

Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free