This is my page URL

.php

In this page, if we click a Sign In button it will display a popup screen with black background. But if we zoom out the page, then it reduces the size of a background color. But i want to cover background the whole screen if we zoom out. I used the code below in my page.

.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 2000%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
} 

But in a test page the below code is used for cover the whole background. It works fine.

<style type="text/css">
  /*give the body height:100% so that its child
    elements can have percentage heights*/
  body{ height:100% }
  /*this is what we want the div to look like*/
  div.fullscreen{
    display:block;
    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;
    background-color: black;
    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    color: white;
  }
</style>

<div class="fullscreen">
  <p>Here is my div content!!</p>
</div>

How can i do the same for my login page background i don't know. Anyone can please help me to solve this problem.

This is my page URL

http://sample./mytest.php

In this page, if we click a Sign In button it will display a popup screen with black background. But if we zoom out the page, then it reduces the size of a background color. But i want to cover background the whole screen if we zoom out. I used the code below in my page.

.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 2000%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
} 

But in a test page the below code is used for cover the whole background. It works fine.

<style type="text/css">
  /*give the body height:100% so that its child
    elements can have percentage heights*/
  body{ height:100% }
  /*this is what we want the div to look like*/
  div.fullscreen{
    display:block;
    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;
    background-color: black;
    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    color: white;
  }
</style>

<div class="fullscreen">
  <p>Here is my div content!!</p>
</div>

How can i do the same for my login page background i don't know. Anyone can please help me to solve this problem.

• javascript
• css
• styles

• 1 How do you place your login form div? Is it inside of table? – SubRed Commented Dec 7, 2012 at 10:08
• if i give the height as 200% it just stops the background above the header. – Rithu Commented Dec 7, 2012 at 10:10
• 1 advice: Try to avoid this: 40 requests ❘ 855.30KB transferred | DOMContentLoaded: 1.9min – Tomas Ramirez Sarduy Commented Dec 7, 2012 at 10:18

4 Answers 4

try

div.fullscreen{
    position:fixed
    ...
}

absolute: The element is positioned relative to its first positioned (not static) ancestor element
fixed: The element is positioned relative to the browser window

You have to put below code before the end of the body tag or after starting of the body tag

<div class="black_overlay" id="fade" style="display: block;"></div>

You need to move your popup and background to outside of any other block elements, probably just before </body>. The background is stretching to fill 100% of it's container which is the table cell rather than the body. This means you will have to change the position (left and right) though.

The problem is that div.black_overlay is inside the table, so you can't use widht:100% and height:100%. Just move div.black_overlay outside the table and add z-index: 1;. I have tested using Firebug and it works!