javascript - How to control css of images on top of a full page semi-transparent overlay div -

i've got full page overlay covering page on load. script have attached close if clicked. purpose of overlay instructional page, have transparent .png images want anchor different areas of page.

i have on listed example below, want have full opacity , spacing away top left corner of page... when load it, set .4 transparency , jammed upper left corner. i'm no css expert, , have been spinning wheels this. can help?

<script language="javascript" type="text/javascript">      $(function () {          var docheight = $(document).height();          $("body").append("<div id='overlay'><div id='home_text'><img src='/images/overlay_test_home.png'></div></div>");          $("#overlay")       .height(docheight)       .css({           'opacity': 0.4,           'position': 'absolute',           'top': 0,           'left': 0,           'background-color': 'black',           'width': '100%',           'z-index': 5000       });          $("#home_text")       .css({           'opacity': 1.0,            'top' : 20,            'left': 200       });          $('#overlay').click(function () {             $("#overlay").hide();         });      });  </script> 

i remove html , css javascript make more maintainable.

here css:

#overlay {     background: rgba(0, 0, 0, .4);     bottom: 0;     left: 0;     position: absolute;     right: 0;     top: 0;     z-index: 10; }  #home_text {     background: red;     height: 300px;     margin: 20px auto 0;     width: 300px; } 

on overlay changed opacity rgba since opacity affects content inside. rgba not supported in browsers can have fallback transparent png, modernizr great support checks. removed height setting on overlay , set left right bottom , left 0. can change home_text positioning liking unsure how should made red box.

here html:

<div id="overlay">     <div id="home_text">         <!-- image -->     </div> </div> 

here cleaned js:

$(function () {     var $overlay = $('#overlay');     $overlay.on('click', function (e) {         $overlay             .hide()             .off();     }); }); 

the off method removes event.

an example of can seen here: http://jsfiddle.net/shbxd/1/