CSS: Fill browser screen with Linear-gradient

Condition: When setting the background property of the <body> tag to a linear-gradient, if your page content is shorter than the full length of the browser screen, the gradient won’t fill the browser screen, but rather repeated at the end of the page content.

CSS code:

body { background: linear-gradient(#CFC, #FFF); }

Solution: set the min-height property of the document root <html> tag to 100%.

html { min-height: 100%; }

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.