Why Doesn't My CSS Gradient Fill the Entire Browser Window?

Inconsistent Gradient Extension in Web Browsers: A Comprehensive Explanation

In establishing a CSS3 gradient background for the body element, users may encounter an interesting behavior where the gradient does not stretch to fill the entire window but instead repeats its pattern. While this is an intended feature in both WebKit and Gecko browsers, it can be disconcerting when the desired effect is a continuous gradient that extends to the bottom of the window.

Understanding the Issue

The default behavior of browsers is to repeat the gradient pattern when the background size is smaller than the window. In cases where the content of the body element is only 300px high, the gradient will only cover that height and then repeat itself indefinitely to fill the remaining space in the window.

Overriding the Default Behavior

To achieve the desired effect of a full-window gradient, it is necessary to override the default behavior using CSS. This can be accomplished by applying the following styles:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

By setting the height of both the html and body elements to 100%, the entire window becomes the area for the gradient. The margin: 0; rule ensures there is no extra space around the body element, and background-repeat: no-repeat; prevents the gradient from repeating. Additionally, background-attachment: fixed; fixes the gradient in place so it does not scroll with the page content.

The above is the detailed content of Why Doesn't My CSS Gradient Fill the Entire Browser Window?. For more information, please follow other related articles on the PHP Chinese website!