Full Screen Backgrounds & Viewport Sizing Units vh & vw

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Master the fundamentals of modern web design with full-screen background techniques, viewport sizing units (vh & vw), precise vertical alignment, and professional CSS image darkening methods.

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll build a professional hero section that commands attention across all devices. Hero images remain one of the most effective design patterns in 2026, used by leading brands to create immediate visual impact. You'll learn to implement responsive typography that scales intelligently with screen size, master viewport units for precise layout control, and apply advanced CSS positioning techniques that work flawlessly from mobile to desktop.

Seeing the Final Result

Before diving into the code, let's examine what we're building to understand the complete picture.

1. Navigate to your project files. On the Desktop, go to Class Files > yourname-Mobile and Responsive Class and open the Full Screen Photo Background Done folder. Ensure you're opening the Done folder to see the completed version.
2. Open index.html in your preferred web browser.
3. Test the responsiveness by resizing your browser window from mobile width (320px) to desktop width (1200px+). Notice how the background seamlessly fills the entire viewport while the typography scales proportionally—this is modern responsive design in action.

Getting Started

Now we'll build this professional hero section from scratch, learning each technique step by step.

1. Open your code editor and navigate to the Full Screen Photo Background folder (not the Done version). If your editor supports project folders, open the entire directory for easier file navigation.
2. Open index.html from the project root directory.

3. Preview the current state in your browser.

   You'll see a basic header with black background and fixed dimensions—far from the immersive experience we're creating. Notice the Scroll Down text link that we'll transform into an elegant icon. The remaining content is already styled, allowing us to focus entirely on perfecting the header section.

4. Keep your browser open and return to index.html in your code editor for live preview workflow.
5. Locate the header tag on line 12—this is our canvas.
6. Examine the heading and anchor elements within the header. These will become our beautifully positioned hero content.
7. Open main.css from the css folder to begin our styling work.
8. Find the existing header rule around line 20—we'll enhance this foundation.

9. Add a high-quality background image with the following enhancement:

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

10. Save the file and observe your progress.

11. Refresh your browser to see the background image appearing within the header container.

Making the Background Image Fill the Screen

Creating a true full-screen experience requires understanding how CSS containers and viewport units work together. This is where many developers struggle, but we'll master it systematically.

1. Return to main.css in your editor.

2. Add height styling to expand the header:

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

3. Save and test this change.

4. Refresh your browser—notice nothing changed. This illustrates a crucial CSS concept.

   The height: 100% declaration sizes elements relative to their parent container—in this case, the body element. Since the body's height is determined by its content rather than the viewport, we need a different approach. This is where viewport units become essential. These CSS units, standardized across all modern browsers by 2026, provide direct access to the visible screen dimensions.

5. Switch back to main.css for the crucial improvement.

6. Replace the percentage with viewport height units:

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

7. Save your work.
8. Refresh the browser to witness the transformation—your header now commands the full screen height, exactly 100/100 of the viewport's visible area.
9. Test responsiveness by resizing your window. The header adapts flawlessly while the background image remains perfectly centered, demonstrating professional-grade responsive behavior.
10. Scroll down to confirm the remaining page content remains intact and accessible.
11. Return to main.css for the final background refinement.

12. Add intelligent image scaling with CSS background-size:

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

13. Save the file and test the improvement.

14. Refresh and resize your browser window to see the background image scale intelligently, maintaining aspect ratio while ensuring complete coverage—the hallmark of professional web design.

Vertically Centering the Heading

With our full-screen foundation established, we'll implement precise vertical centering—a technique that creates visual balance and professional polish.

1. Navigate back to main.css in your editor.
2. Locate the h1 rule around line 27.

3. Add vertical alignment styling:

   h1 {

   Code Omitted To Save Space

   margin: 0;
      vertical-align: middle;
   }

4. Save and test this initial step.

5. Refresh your browser—notice no visible change. This demonstrates an important CSS principle.

   The vertical-align property only affects inline and table-cell elements. By default, h1 elements use block display, rendering vertical-align ineffective. We need to modify the display behavior to unlock vertical centering capabilities.

6. Enhance the h1 rule with the proper display type:

   h1 {

   Code Omitted To Save Space

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

7. The table-cell display value leverages CSS table behavior for precise alignment—a time-tested technique that remains reliable across all browsers in 2026. However, table cells require a parent table container to function properly.

   Update the header rule (around line 20) to provide the necessary table context:

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

8. Save your changes.
9. Refresh the browser to see perfect vertical centering in action. You may notice the header has narrowed—this occurs because CSS tables size to their content by default.
10. Return to your code editor for the width correction.

11. Restore full-width display to the header:

    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. Refresh to see the perfectly centered heading spanning the full viewport width. The Scroll Down link may still affect perfect centering—we'll address this in the next section.
14. Return to your editor to position the scroll indicator more effectively.
15. Find the .scroll-down rule around line 54.

16. Apply professional positioning techniques:

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

17. Save the file.

18. Refresh your browser to see the scroll indicator repositioned below the heading, creating better visual hierarchy and perfect heading centering.

Adding an Icon with Image Replacement

Professional web design requires attention to every detail. We'll transform the basic text link into an elegant icon while maintaining accessibility—a best practice that serves all users effectively.

1. Return to your code editor for this enhancement.

2. Replace the text with a professional icon using the image replacement technique:

   .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. Refresh to see the clean, professional arrow icon—much more engaging than plain text.

5. Let's add subtle transparency for sophisticated visual hierarchy. Return to your editor.

6. Enhance the icon with opacity control:

   .scroll-down {

   Code Omitted To Save Space

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

7. Save your work.

8. Refresh and examine the positioning carefully. You may notice the icon is slightly off-center—this occurs because we're positioning the icon's left edge at 50%, not its center.

   For pixel-perfect centering, we need to offset the icon by half its width (20px) from the 50% position. CSS calc() function enables this precise calculation, mixing percentage and pixel values seamlessly.

9. Return to your editor for perfect centering.

10. Apply mathematical precision to the positioning:

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

    Code Omitted To Save Space

    }

    NOTE: The calc() function requires spaces around operators. For complex calculations, you can write: calc(50% - 40px / 2); and CSS will handle the order of operations correctly.

11. Save the file.

12. Refresh to appreciate the subtle but important improvement to alignment—this attention to detail distinguishes professional work.

Darkening the Background & Sizing Type to the Viewport

The final touches involve ensuring optimal readability and truly responsive typography. These techniques create designs that look stunning across every device and screen size.

1. Return to your code editor and locate the h1 rule around line 29.

2. Add a subtle dark overlay to improve text readability:

   h1 {

   Code Omitted To Save Space

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

3. Save the file.

4. Refresh to see how the semi-transparent overlay enhances text legibility without compromising the image's impact.

5. Test the current typography by slowly resizing your browser to mobile width. Notice how the 80px font size remains fixed—this breaks responsive design principles.

Viewport-relative typography represents the evolution of responsive design. Instead of static font sizes, we'll implement truly fluid typography that scales intelligently across all devices.

1. Return to your code editor for this advanced technique.

2. Replace fixed font sizing with intelligent viewport scaling:

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

   Code Omitted To Save Space

   }

   NOTE: This creates proportional scaling: 18vw equals 18% of viewport width. On a 320px mobile screen: 320 × 0.18 = 57.6px. On a 1200px desktop: 1200 × 0.18 = 216px. The typography scales perfectly with the device!

3. Save the file.

4. Refresh and test by resizing your window. The typography now scales beautifully for mobile but becomes overwhelming on larger screens—we need responsive breakpoints to perfect this.

   Professional responsive design requires strategic breakpoints. We'll implement a media query to optimize the typography for larger viewports while maintaining perfect mobile scaling.

5. Return to your editor for the final refinement.
6. Locate the MEDIA QUERIES comment around line 68.

7. Add professional-grade responsive typography between the comment and existing media query:

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

8. Save the file.

9. Refresh and test your masterpiece by resizing from mobile (320px) through tablet (768px) to desktop (1200px+) widths. You've created a professional, full-screen responsive hero section that adapts flawlessly to any device—exactly what modern web design demands.