darking the page

[programAngel]

Hi,

I am building a car gallery.

Something very basic.
This is the link to it:
http://www.barzilaymor.co.il/car-gallery/index.html

Now I created the following element in the html code:

<div class="big-picture-contianer" id="big-picture-contianer"><img class="big-picture" id="big-picture" /></div>

I gave it the following css:

.big-picture-contianer{
	display: none;
	background-color: #686868;
	opacity: 0.5;
	z-index: 500;
	width: 100%;
	
	}
#big-picture{
	position: absolute;
	top:30%;
	right:40%;	
	opacity:1;
	z-index: 7000;
	}

It is not displayed by default but I have javascript that change the display property to block.

What I try to do is that when you pressed on one of the car the whole screen become darker (that is why the color and the opacity of the big-picture-contianer's div), And the car is suppose to appear with not opacity at all, I gave it opacity of 1.

Instead I don't see at all the gray background, and the big car are transparent.

Where am I wrong in my css setting?

[hyperionXS]

Because #big-picture has position: absolute, .big-picture-contianer has no height. Set it some height.

[programAngel]

Because #big-picture has position: absolute, .big-picture-contianer has no height. Set it some height.

OK thanks.
you are right.

I would also like to add that I have discovered that there is need to have the following css:

html{
 height:100%;
}
body{
 height:100%;
}