problem in my css

It is commonly referred to as a modal window, and it uses javscript and CSS. There are different way to do this easily with different javascript frameworks. My suggestion would be to use the jQuery UI dialog window with it set to modal.
http://jqueryui.com/dialog/

Here is a simple example I had in jsFiddle
http://jsfiddle.net/pixelsoul/AsyCt/

One approach is to have a "hidden" div with a z-index greater than the normal content on your page, but with a z-index less than the "modal pop-up". This "hidden" div would have styling such as:

display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: ?;
z-index: ?;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);

When you perform some action, click on a link, hover, etc..., you use JavaScript to display the modal pop-up & also display this "hidden" div. Since you may want to apply the opacity to this hidden div, when you make it visible, it will appear as the display has "dimmed" because you will faintly see your normal content in the background.

EDIT: Looks like I was responding at about the same time as pixelsoul. I like that solution with jQuery, if you are already including the jQuery/jQueryUI library in your web app.

THank you for the quick response...I mean for the background color, as you can see when you are going to clicked the log-in link the background color will cover the whole page without the white background in the bottom of the page...i am trying to set the height of my background color to 100% with absolute positioning,but still i have white background color at the bottom...Thank you again for the reply. I appreciated it.

:)

If you a demo of your site online, provide the URL so we can take a look, or provide the relevant code in your post.

@JorgeM, Thank you,....