Full Screen Backgrounds & Viewport Sizing Units vh & vw

Topics covered in this Mobile & Responsive Web Design tutorial:

Creating a full screen background, Using viewport sizing units vh & vw, Vertically aligning content, Darkening the background image via CSS

Exercise Preview

Exercise Overview

In this exercise you’ll create a page header that fills the entire screen with an image and heading. This is often called a hero image. You’ll size type relative to the screen size (so type gets larger on larger screens) as well as look at a method for perfectly positioning an element in the center of the page.

Seeing the Final Result

1. Let’s see how the final page is supposed to look. On the Desktop, go to Class Files > yourname-Mobile and Responsive Class and open the Full Screen Photo Background Done folder. Make sure to get the Done folder!
2. Open index.html in a web browser.
3. Resize the browser window, making it smaller and larger. Notice how the background always fills the screen, and the type changes size based on the window size!

Getting Started

1. Let’s see how to create this page. For this exercise we’ll be working with the Full Screen Photo Background folder. Open that folder in your code editor if it allows you to (like Sublime Text does). Make sure you do not open the Done folder!
2. Open index.html from the Full Screen Photo Background folder.

3. Preview the page in a web browser.

   Currently the header has a black background and is sized to the content, but we want it to fill the screen. Also note the Scroll Down text link. We want to replace that with a graphic. The rest of the content has been styled already, so we’ll focus on the header.

4. Keep the page open in your browser, and switch back to index.html in your code editor.
5. Find the header tag on line 12.
6. Inside that, notice the heading and anchor tags. These are the elements we will be targeting.
7. In your code editor, open main.css from the css folder.
8. Let’s add a large, centered background image to the header. On line 20 find the header rule.

9. Add the following code as shown below in bold:

   header {
      color: #fff;
      background: #000 url(../img/mountains@2x.jpg) center;
      text-align: center;
   }
   

10. Save the file.

11. Switch back to the browser and reload to see that the background image is now partially visible in the header.

Making the Background Image Fill the Screen

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: #000 url(../img/mountains@2x.jpg) center;
      text-align: center;
      height: 100%;
   }
   

3. Save the file.

4. Switch back to the browser and reload to see that nothing changed. Why is the header still the same height?

   The height: 100% sizes the element to 100% of the parent container. For the header, that would be the body tag. The height of the body tag is based on content, which may be smaller or larger than the window.

   Instead of using a percentage, we can use an alternate viewport unit of measurement. These units are relative to the size of the viewport (the visible portion of the page). Similar to percentages, 1 viewport unit = 1/100th of the viewport. Let’s see how to use this.

5. Return to main.css in your code editor.

6. Change the height from % to vh, as shown below in bold:

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

7. Save the file.
8. Switch back to the browser and reload. The header (and therefore the image) fills the screen now, because we set the height to 100/100 of the visible height of the viewport.
9. Resize the browser window to see how the header area resizes with the window. The image moves to stay centered within this area. The background image is larger than the viewport, so it gets cropped.
10. Scroll down the page to see that the rest of the content is still there.
11. Return to main.css in your code editor.

12. Let’s tell the background image to scale down to fit into the header area. In the header rule, add the following code shown below in bold:

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

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

14. Resize the window to see that the photo scales to fill the window. Awesome!

Vertically Centering the Heading

Now that the header fills the screen, it would look better if the headline was vertically centered on the page.

1. Return to main.css in your code editor.
2. Around line 27 find the h1 rule.

3. Add the following code as shown below in bold:

   h1 {

   Code Omitted To Save Space

      margin: 0;
      vertical-align: middle;
   }
   

4. Save the file.

5. Switch back to the browser and reload to notice nothing changed. Why is that?

   The vertical-align property only works on inline or table-cell elements. By default, h1 elements are block, so it did not have any effect. We need to change the h1’s display type in order for vertical-align to take effect.

6. Return to your code editor and add the following bold code to the bottom of the h1 rule:

   h1 {

   Code Omitted To Save Space

      vertical-align: middle;
      display: table-cell;
   }
   

7. The table-cell display value makes an element behave the same as if we were using HTML td tags. Just like with HTML tables though, we can’t have a table cell without a containing table.

   In the rule for header (line 20), add the following bold code:

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

8. Save the file.
9. Switch back to the browser and reload. The header’s text is vertically centered, but now the header has shrunk in width. This is because the table is only as wide as its content. We can fix this by giving the header a width of 100%.
10. Switch back to your code editor.

11. In the header rule, add the following bold code:

    header {
       color: #fff;
       background: #000 url(../img/mountains@2x.jpg) center;
       background-size: cover;
       text-align: center;
       height: 100vh;
       display: table;
       width: 100%;
    }
    

12. Save the file.
13. Switch back to the browser and reload. The heading isn’t quite centered, thanks to the Scroll Down link in the upper-right corner. Let’s position the link in a better place.
14. Return to your code editor.
15. Find the .scroll-down rule around line 54.

16. Add the following bold code to start positioning it:

    .scroll-down {
       color: #fff;
       position: absolute;
       bottom: 20px;
       left: 50%;
    }
    

17. Save the file.

18. Switch back to the browser and reload to see that the link is positioned below the heading.

Adding an Icon with Image Replacement

The text link isn’t very compelling, so let’s replace it with an icon indicating that users should scroll down. We’ll use the image replacement technique so we still have the text in the code for better accessibility.

1. Return to your code editor.

2. To specify the size and image, add the following bold code:

   .scroll-down {
      color: #fff;
      position: absolute;
      bottom: 20px;
      left: 50%;
      background: url(../img/down-arrow-circle.svg) no-repeat;
      width: 40px;
      height: 40px;
      text-indent: -9999px;
   }
   

3. Save the file.
4. Switch back to the browser and reload to see the arrow icon.

5. Let’s make the icon slightly transparent so that it’s a bit less prominent. Return to your code editor.

6. In the .scroll-down rule, add the following bold code:

   .scroll-down {

   Code Omitted To Save Space

      height: 40px;
      text-indent: -9999px;
      opacity: .6;
   }
   

7. Save the file.

8. Switch back to the browser and reload. If you look closely, you may notice that the arrow icon isn’t exactly centered below the heading (it’s close, but slightly off).

   Currently the icon’s left edge is 50% from the left side of the viewport, but we want the center of the icon to be at that 50% position. If we positioned the image at 50%, then moved it over half the icon’s width, it would be perfectly centered. We made the image 40px wide, so we need to subtract 20px from the 50%. To mix percentage and pixel values in CSS, we’ll need to use the calc property and have CSS do that math for us!

9. Return to your code editor.

10. Change the left property value as follows, and make sure you include the spaces inside the calc as we’ve shown below!

    .scroll-down {
       color: #fff;
       position: absolute;
       bottom: 20px;
       left: calc(50% - 20px);
    

    Code Omitted To Save Space

    }

    NOTE: 40 is easy to divide by two, but if we had a larger or more complex value, we could also write the division into the calc value: calc(50% - 40px / 2);

11. Save the file.

12. Switch back to the browser and reload to see the subtle improvement to the alignment.

Darkening the Background & Sizing Type to the Viewport

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 and find the h1 rule around line 29.

2. Add the following bold code:

   h1 {

   Code Omitted To Save Space

      display:table-cell;
      background: rgba(0,0,0, .4);
   }
   

3. Save the file.

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

5. Slowly resize the window to a narrow mobile view, noticing the heading font size remains a fixed 80px.

Just as we used viewport units to define the height of the header section, we can apply this relative unit of measurement to font sizes!

1. Return to your code editor.

2. In the h1 rule, edit the font-size property value as shown below in bold:

   h1 {
      font-family: 'Vast Shadow';
      font-weight: normal;
      text-transform: uppercase;
      font-size: 18vw;
   

   Code Omitted To Save Space

   }

   NOTE: How does this work? 18vw is like 18% of the viewport width. On a 320px screen, 320 x .18 = 57.6px type. On a 1200px screen, 1200 x .18 = 216px type. So the type will be larger on larger screens!

3. Save the file.

4. Switch back to the browser and reload. Resize the window wider and notice how the font size changes in relation to the viewport size. It looks great at a mobile phone size, but huge at a desktop size!

   When the window is larger than about 600px, the heading starts dominating the page. We would also like it to be on a single line rather than two on a wide screen like the desktop. Let’s write a media query to size the h1 down a bit on larger screens.

5. Return to your code editor.
6. Around line 68 find the MEDIA QUERIES comment.

7. Between that comment and the hi-res media query, add the following code:

   @media (min-width: 600px) {
      header h1 {
         font-size: 8vw;
      }
   }
   

8. Save the file.

9. Switch back to the browser and reload. Resize the window from mobile through desktop size to check out your full screen, responsive background!