Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Intro

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:


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

/*Intro*/

.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) {
    .full-bg-img,
    .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 1

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.