CSS Background Image Full-Screen Stretching: Complete Guide to Solving 100% Height Issues

Problem Analysis

Implementing full-screen background image stretching in CSS is a common requirement, but many developers encounter a specific issue: the width successfully stretches to 100%, but the height only extends to the height of the page content, not the entire viewport. The root cause of this phenomenon lies in the height calculation mechanism of the HTML document flow.

Core Solution

To achieve a true full-screen background image, the key is understanding the height inheritance relationship between the html and body elements. By default, the html element's height is determined by its content, not 100% of the viewport. When the body element sets background-size: 100% 100%, it can only scale relative to the current height of its parent html element.

The correct implementation code is as follows:

html {
    height: 100%;
}

body {
    background-image: url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Technical Principle Explanation

When setting html { height: 100% }, you're essentially making the html element inherit the viewport's height. In CSS, percentage height calculations depend on the explicit height value of the parent element. The viewport height can be obtained through the 100vh unit or height: 100%.

The specific workflow is as follows:

1. The html element is set to height: 100%, inheriting the full viewport height
2. The body element by default inherits the height of the html element
3. The background image scales based on the body element's dimensions with background-size: 100% 100%
4. Ultimately achieving an image that fills the entire screen in both width and height

Alternative Approach: Using the Cover Value

In addition to the 100% 100% solution, consider using background-size: cover. This method maintains the image's original aspect ratio while ensuring it covers the entire container. Its advantage lies in preventing image distortion, making it particularly suitable for scenarios where image aesthetics are important.

Complete code example using cover:

html {
    background: url(image/path) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

Browser Compatibility Considerations

To ensure proper display across various browsers, it's recommended to add browser prefixes. Modern browsers have excellent support for the background-size property, but for some older versions, prefixes remain necessary.

Complete cross-browser compatible code:

html {
    height: 100%;
}

body {
    background-image: url("../images/myImage.jpg");
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

Practical Application Scenarios

This full-screen background technique is widely used in modern web design, particularly for:

• Welcome pages of single-page applications
• Banner areas of product showcase websites
• Background image handling in responsive design
• Websites requiring immersive user experiences

By properly understanding and using the crucial setting of html { height: 100% }, developers can easily implement various complex full-screen background effects, providing users with enhanced visual experiences.