Home >Web Front-end >CSS Tutorial >How to Make a Full-Screen Background Gradient Fill the Entire Page?

How to Make a Full-Screen Background Gradient Fill the Entire Page?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-30 02:57:02277browse

How to Make a Full-Screen Background Gradient Fill the Entire Page?

Ensuring a Full-Screen Background Gradient

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn