How do I expand the background image to fill the entire page?

Question

I'm creating an animation of the fixed-place button at the top left that creates a background that spreads across the page when clicked.So I wrote a CSS like this:It only expands to the parent element, but how do I make it an animation that stretches to the entire page?

 div { height: 200px; width: 200px; background: radial-gradient(circle at center, blue 50%, transparent 50%); background-size: 10% 10%; background-position: center; background-repeat: no-repeat; transition: all .5s; } div:hover { background-size: 200% 200%; }

 <div></div>

Answer 1

Set the height and width to 100vw and 100vh respectively

I've also added CSS to the body , to stop the scrollbars appearing when the element is full-sized

 div { height: 200px; width: 200px; background: radial-gradient(circle at center, blue 50%, transparent 50%); background-size: 10% 10%; background-position: center; background-repeat: no-repeat; transition: all .5s; } div:hover { width: 100vw; height: 100vh; background-size: 200% 200%; } body { overflow: hidden; }

 <div></div>

Answer 2

You can consider a pseudo element like below:

 .box { height: 200px; width: 200px; position: relative; } .box:before { content: ""; position: absolute; top: -100vh; bottom: -100vh; left: -100vw; right: -100vw; background: radial-gradient(circle, blue 50%, transparent 50%) center no-repeat; background-size: 20px 20px; transition: all .5s; pointer-events:none; } .box:hover::before { background-size: 200% 200%; } html { overflow:hidden; }

 <div class="box"></div>

Answer 3

Change the height and width properties to 100vh and 100vw respectively.

• vh - viewport height
• vw - viewport width

 div { height: 200px; width: 200px; background: radial-gradient(circle at center, blue 50%, transparent 50%); background-size: 10% 10%; background-position: center; background-repeat: no-repeat; transition: all .5s; } div:hover { height: 100vh; width: 100vw; background-size: 200% 200%; }

 <div></div>