How to Make a CSS Gradient Background Fill the Entire Browser Window Height?

Managing Gradient Backgrounds to Fill Window Height

When applying a CSS3 gradient background to the element, it by default repeats itself instead of stretching to fill the entire browser window. Despite being observed in both WebKit and Gecko-based browsers, this behavior is intentional.

To remedy this, the gradient needs to be configured:

1. Set the Height of the HTML Element:

   html {
       height: 100%;
   }

   Copy after login

2. Manage the body Element:

   body {
       height: 100%;               // Match the height of the HTML element
       margin: 0;                  // Remove any margins to ensure full window coverage
       background-repeat: no-repeat; // Prevent gradient repetition
       background-attachment: fixed; // Keep the gradient in position as the page scrolls (optional)
   }

   Copy after login

By applying these CSS styles, the gradient background will now stretch to fill the browser window, regardless of the height of the content within the .

The above is the detailed content of How to Make a CSS Gradient Background Fill the Entire Browser Window Height?. For more information, please follow other related articles on the PHP Chinese website!