Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in


MDB Pro required

This lesson requires MDB Pro package. If you use MDB Free version some elements might not work as expected.


1. Cover image

In order to create a full-page intro with image covering the entire available space, place the following code inside the style.css file:

.view {
    height: 100%;


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

@media (max-width: 768px) {
    .view {
        height: auto;
        position: relative;

You should already know the code above from the previous lessons, so I'm not going to talk to much about it.

Here is only one modifications - for the screens smaller than 768px we change a position for image wrappers from absolute to relative.

Why? Because this time we've got much more content within our Intro and in this case absolute position of the wrappers would make a big mess on mobile devices.

2. Navbar's colors

Right now our Navbar is transparent all the time, even after scrolling down. It may look good on the dark background, but when we reach sections below the Intro, it becomes completely unreadable.

To fix it place the following code in style.css :

/* Navigation*/

.navbar {
    background-color: transparent;

.top-nav-collapse {
    background-color: #1C2331;

@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #1C2331;

Alright, our Intro is ready for some awesome content. We'll take care of it in the next lesson.

If something doesn’t work as awesome, 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 3

Leave a reply

Anonymous User

Bootstrap tutorial


Progress: 0%

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

Sign up for free