Flexbox: Vertical Centering on a Full Screen Background

Topics covered in this Web Development tutorial:

Creating a Full Screen Background, Using Viewport Sizing Units vh & vw, Vertically Aligning Content With Flexbox, Darkening the Background Image Via CSS

Exercise Preview

Exercise Overview

In this exercise you’ll use flexbox to layout a page header that fills the entire screen with an image, and a heading that is centered in the screen.

Getting Started

1. In your code editor, close any files you may have open.
2. For this exercise we’ll be working with the Flexbox Vertical Centering folder located in Desktop > Class Files > yourname-Flexbox Grid Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open index.html from the Flexbox Vertical Centering folder.

4. Preview index.html in a browser.

   • Currently the header has a photo background that is sized to the content, but we want it to fill the screen.
5. Keep the page open in your browser, and switch back to index.html in your code editor.
6. Find the header tag.
7. Inside that, notice the heading and anchor tags. These are the elements we will be targeting.

8. In your code editor, open main.css from the css folder (in the Flexbox Vertical Centering folder).

Creating a Full Screen Background

We want the header to take up the full screen. Background images fill their container, so we need to make the header element taller.

1. Switch back to main.css in your code editor.

2. Add the following bold code:

   header {
      color: #fff;
      background: url(../img/mountains@2x.jpg) center;
      background-size: cover;
      min-height: 100vh;
   }
   

3. Save the file.
4. Switch back to the browser and reload. The header fills the entire height of the screen now.

5. Resize the browser window to see how the header area resizes with the window. The background image scales to cover the area.

Darkening the Background Image

The text can be hard to read on the brighter parts of the background image. We can add a transparent dark overlay on top of the background image to help this.

1. Return to your code editor.

2. Add the following bold code and don’t miss the comma!

   header {
      color: #fff;
      background: 
         linear-gradient(), 
         url(../img/mountains@2x.jpg) center;
      background-size: cover;
      min-height: 100vh;
   }
   

3. Add the following bold code:

   header {
      color: #fff;
      background: 
         linear-gradient( rgba(), rgba() ), 
         url(../img/mountains@2x.jpg) center;
      background-size: cover;
      min-height: 100vh;
   }
   

4. Add the following bold code:

   header {
      color: #fff;
      background: 
         linear-gradient( rgba(0,0,0, .4), rgba(0,0,0, .4) ),
         url(../img/mountains@2x.jpg) center;
      background-size: cover;
      min-height: 100vh;
   }
   

5. Save the file.

6. Switch back to the browser and reload to see the darkened background image!

Vertically Centering the Header Content

Now that the header fills the screen, we want to vertically center the text inside it.

1. Add the following bold code:

   header {

   Code Omitted To Save Space

      min-height: 100vh;
      display: flex;
   }
   

2. Save the file, and reload the page in your browser.

   • Notice the scroll down arrow has moved to the right of Peak Gear because the default flex direction is row. Let’s stack these vertically by changing that direction.
3. Return to your code editor.

4. Add the following bold code:

   header {

   Code Omitted To Save Space

      display: flex;
      flex-direction: column;
   }
   

5. Save the file, and reload the page in your browser.

   • Notice the scroll down arrow is below Peak Gear, which is what we want. Now we can center the content in both directions: vertically (along the main axis) and horizontally (along the cross axis).
6. Return to your code editor.

7. Add the following bold code:

   header {

   Code Omitted To Save Space

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }
   

8. Save the file, and reload the page in your browser.

   • On large screens the content is nicely centered and looking good!
   • Resize the window narrower, to see that the heading text is left aligned (on mobile screens), because the default text alignment is left. Let’s center the text.
9. Switch back to your code editor.

10. In the h1 rule, add the following bold code:

    h1 {

    Code Omitted To Save Space

       margin: 0;
       text-align: center;
    }
    

11. Save the file, and reload the page in your browser.

    • On narrow screens (as well as wide) the text should now be centered.

Moving the Scroll Down Arrow to the Bottom

1. Switch back to your code editor.

2. In the h1 rule, change the margin from 0 to auto as shown below:

   h1 {

   Code Omitted To Save Space

      margin: auto;
      text-align: center;
   }
   

3. Save the file, and reload the page in your browser.

   • Notice the scroll down arrow has moved down to the bottom, which is where we want it!
   • The scroll down arrow needs some space below so it doesn’t touch the edge.
   • The heading is now vertically centered between the top of the page and the scroll down arrow. That means the heading is not fully centered in the screen (it’s a little too high). We think it looks good, but let’s see how to vertically center it perfectly in case you wanted to.
4. Return to your code editor.

5. In the header rule add the following bold code to adjust the spacing:

   header {

   Code Omitted To Save Space

      align-items: center;
      padding: 60px 0 20px;
   }
   

   NOTE: Why these amounts? We’re adding 20px of padding to the bottom (below the arrow). The height of the arrow (40px) plus the 20px equals 60px. Therefore we’re adding 60px of top padding to match the space occupied by the arrow to balance things out.

6. Save the file, and reload the page in your browser.

   • Resize the window from mobile through desktop size to check out your full screen, responsive background!