www.webdeveloper.com
Results 1 to 3 of 3

Thread: darking the page

Hybrid View

  1. #1
    Join Date
    Feb 2011
    Posts
    90

    darking the page

    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:
    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:
    Code:
    .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?

  2. #2
    Join Date
    Feb 2012
    Posts
    218
    Because #big-picture has position: absolute, .big-picture-contianer has no height. Set it some height.

  3. #3
    Join Date
    Feb 2011
    Posts
    90
    Quote Originally Posted by hyperionXS View Post
    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:
    Code:
    html{
     height:100%;
    }
    body{
     height:100%;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles