Hi People.
Want some help regarding overlay div.

I'm trying to develop a overly form. Just wanna know how to make div container(the overlay form) occupy or wrap entire browser area....

What I'm trying to do is......

I have a parent container, where all other containers and images reside. In this container there is a button, "GET REGISTRATION FORM".

On click of this button, I want the background to go dull....and the registration form to fade in front... User should not have any access to the page content beneath when this form is on top. There is close button in the form. Once its clicked the form will fade out... and my home page below will be active again.

What I've done so far is....

Just above my parent container, I've created another div with id "overlay".
I've put form inside this.... and then in CSS, I've made like this.

position: absolute;
z-index : 10; 
top: 0;
width: 100%;
height: 100%;
background: url('transparent_image.png');
display: none

Initialy I've got to hide the div, and make it appear only on click event of the "GET REGISTRATION FORM" button.
So, in jquery I've passed id of the "GET REGISTRATION FORM" button... on click... #overlay will fadeToggle();

Now the problem is... my home page content is dynamic. I mean there are some tables which display lot of data. And these records are fetched from database and displayed in the table. So the number of records displayed in the table vary.... and hence the height of my home page will vary.... I'm not able to get the #overlay container to occupy entire browser area.... I mean it goes to certain height... and then when I scroll... the home page contents (which are beneath the overlay form) are visible .... I mean the overlay container won't completely wrap the browser area. Is there any way to make it occupy entire home page..?

Sorry for the lengthy post, just wanted to clarify my issue as much as possible.


4 Years
Discussion Span
Last Post by Albert Pinto

This is a common mistake that people make, you need to define a 100% area in both your Body and Overall in your CSS like this:

    height: 100%;

    height: 100%;

    height: 100%;

Give that a try and let us know how it goes! That should tell the Div to occupy the entire area of the browsers viewport (however it does cause other values to do some funky things.... so be careful).

Edited by Octet


Thanx for the quick reply sir...

Yeah I tried that solution, didn't worked.

I tried this too....

height: 100%;

But it caused lot of alignment issues.... so I reverted it back....

I don't know whether there is a pure CSS way to fix this...I'm still trying to find some solution to this...... will post it here if I found one.

Thanx for your time and consideration.



Check the size of your transparent_image.png (I would make it 1px x 1px)
and use background-repeat: repeat; because although your div is 100% x 100% your image may not be big enough.

Edited by TonyG_cyprus

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.