Home > Article > Web Front-end > How to Make a Full-Screen Background Gradient Fill the Entire Page?
Achieving a full-screen background gradient is a common task in web development. However, when the body element does not occupy the entire page, the gradient can appear truncated. Here's a solution to effectively make the
element fill the entire screen, irrespective of the content's height:By applying the following CSS properties to the and
elements:<code class="css">html, body { margin: 0; height: 100%; }</code>
This ensures that both the and
elements have no margins, effectively eliminating any whitespace around them. Moreover, setting the height to 100% specifies that the height of these elements should occupy the full vertical space of the browser window.As a result, the
element will stretch to fill the entire screen, and the radial gradient background will be visible across the entire page, regardless of the amount of content present.The above is the detailed content of How to Make a Full-Screen Background Gradient Fill the Entire Page?. For more information, please follow other related articles on the PHP Chinese website!