FixedPosition

Fixed position background image with transparent container containing text

by sum1

HTML

<!--With position:fixed, you cannot apply margin:auto.See how fixed 
positioned element is centred  -->

<div id="main"></div>
<div id="cont">
    <div id="cont1">
        <div id="cont1_text">The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW?? Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array. Since JavaScript’s arrays are really objects, the for in statement can be used to iterate over all of the properties of an array. Unfortunately, for in makes no guarantee about the order of the properties, and most array applications expect the elements to be produced in numerical order. Also, there is still the problem with unexpected properties being dredged up from the prototype chain. Since JavaScript’s arrays are really objects, the for in statement can be used to iterate over all of the properties of an array. Unfortunately, for in makes no guarantee about the order of the properties, and most array applications expect the elements to be produced in numerical order. Also, there is still the problem with unexpected properties being dredged up from the prototype chain.</div>
    </div>
    <div id="cont2">
        <div id="cont2_text">Method 2 1. open the project and add the required .mdf file and give the connection strings accordingly. 2. File->new project->setup and deployment-> choose any name and proceed. 3. File system with three folder appears : Application folder, users desktop,users program menu 4. Application Folder->Add-> file : go to the bin/debug folder of the project and add all the files from there including the database file. 5. If you want to create the shortcut to desktop, create shortcut by right clicking the .exe file and create shortcut.Rename the shortcut file and drag it to the User’s...

CSS

#main {
     background-image:url("http://wallpaperist.net/file/911/sport-football-wallpapers-liverpool-clubs-fernando-torres-liverpool-wallpapers-football-clubs.jpg");
     right:50%;
     margin-right:-500px;
     opacity:0.5;
     width:1000px;
     height:100%;
     position:fixed;
 }
 #cont {
     width:900px;
     height:200%;
     margin:auto;
     padding:40px;
     position:relative;
 }
 #cont1 {
     background-color:rgba(0, 128, 128, 0.5);
     width:900px;
     padding:20px;
     box-sizing:border-box;
     position:relative;
     z-index:3;
 }
 #cont1_text, #cont2_text {
     color:white;
     z-index:4;
     opacity:1;
     padding:20px;
     top:10px;
     font-family:consolas;
     font-size:20px;
 }
 #cont2 {
     background-color:rgba(41, 79, 109, 0.7);
     width:100%;
     padding:20px;
     box-sizing:border-box;
     position:relative;
     z-index:3;
 }