Why Doesn't My CSS3 Gradient Stretch to Fill the Entire Browser Window?

Stretching Gradients in CSS3

When specifying a CSS3 gradient background for the element, the gradient does not stretch to fill the entire browser window. Instead, it repeats itself until the content area is filled. This behavior can be frustrating if you want the gradient to extend beyond the content.

Solution

To make the gradient stretch to fill the browser window, apply the following CSS:

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

These styles accomplish the following:

• html { height: 100%; }: Sets the height of the element to 100%, ensuring that the gradient background can extend beyond the viewable area.
• body { height: 100%; margin: 0; }: Sets the height of the element to 100% and removes any margins to eliminate potential overlap between the gradient and the content.
• background-repeat: no-repeat;: Prevents the gradient from repeating itself after filling the content area.
• background-attachment: fixed;: Ensures that the gradient remains fixed in place as the scrollbar moves, creating a continuous gradient effect throughout the entire window.

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