How Can I Make A CSS Linear Gradient Act More Like a Background Image, and not Strech Out Across The Page? [closed]

6 days ago 18
ARTICLE AD BOX

You could put that gradient as the background to a pseudo element which is fixed in the viewport and has the dimensions of the viewport.

<head> <style> body { min-height: 100vh; position: relative; width: 100vw; } body::before { content: ''; background-image: linear-gradient(to top, #5794cc, #dce3ea); position: fixed; top: 0; height: 100vh; left: 0; width: 100%; z-index: -1; } .tall { width: 100%; height: 200vh; } </style> </head> <body> <div class="tall">a div which is taller than 100vh</div> </body>

A Haworth's user avatar

Sign up to request clarification or add additional context in comments.

Read Entire Article