SteveHinesley.com

My Personal Technical Resource

Make a full screen <div> overlay that does not move when the page scrolls

If you need to make a full screen div overlay to load a popup, like a system modal dialog or an animated loading image and want to keep it full screen without it moving with the scroll bars, there is a simple solution.

You just need to add the correct CSS to lock the <div> into position so that it does not move when the page is scrolled.

Here is the relevant CSS:

/* Make a div that's 100% of the browser's viewable area and load an image to dim the page */
#loading_background {
 min-height: 100%; /* needed for some browsers */
 width: 100%;
 height: 100%;
 background-image: url(/images/screen.png);
 display: block;
 z-index: 99; /* show this div in front of everything, but one level below the loading animation */
 position: fixed; /* this is the most important line */
 top: 0;
 left: 0;
 visibility: hidden; /* don't show this div until we need it */
}

/* Make a div to load the loading animation */
#loading_animation {
 min-height: 100%; /* needed for some browsers */
 width: 100%;
 height: 100%;
 background-image: url(/images/loading.gif);
 background-repeat: no-repeat;
 background-position: center center;
 display: block;
 z-index: 100; /* Put this one level above the "loading_background" div */
 visibility: hidden; /* don't show this div until we need it */
}

Of course there are many ways to display the loading animation, but adding the “position: fixed;” keeps the background fixed even if the page is scrolled. I know this seems fairly obvious, but I had to look it up and I found some ridiculous answers so I thought I’d share that it’s not impossible and rather simple.

Download Make a full screen <div> overlay that does not move when the page scrolls as PDF

Tags: , , , , , , , , ,