Why Doesn't My CSS3 Gradient Background Stretch to Full Window Height?

Gradient Background Stretch Issue in CSS3

Problem:

Despite setting a gradient background for the element using CSS3 gradients, the gradient height remains fixed at the height of the content, repeating itself to fill the remaining window space. This behavior occurs in both WebKit and Gecko browsers.

Solution:

To force the gradient to stretch to the height of the window, apply the following CSS:

html {
    height: 100%;
}

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

Explanation:

• html and body heights are set to 100%, forcing them to fill the entire window height.
• margin: 0; on the body removes any unwanted margins.
• background-repeat: no-repeat; prevents the gradient from repeating.
• background-attachment: fixed; fixes the gradient's position, ensuring it remains stationary as the window is resized.

This solution ensures that the gradient stretches vertically to fill the entire window height, without repeating or disrupting the page layout.

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