CSS3 re-size page according to screen size / display
===

how can i get my page to align to fit into any any screen size, for example, take a look at this link for a better understanding https://dl.dropbox.com/u/8542058/Photo%20Jul%2012%2C%209%2056%2026.png
if you notice, on the link above, once the screen is adjusted, the image on the screen adjust it self and take the shape of the screen accordingly. now i want to do the same to my page, my demo page can be found on http://jsfiddle.net/529Lk/show/, and the codes are http://jsfiddle.net/529Lk/. thanks

for easy view my codes are still here:

CSS3:

    body{
    font-family: Arial, "MS Trebuchet", sans-serif;
    color:#000;
    background:#088A08;
    font-weight: bold;
    margin:auto;           
    }
    /* SLIDE Start */

    input[id=slideThree] {
    visibility: hidden;
    }

    /* SLIDE THREE */
    .slideThree {
    width: 120px;
    height: 45px;
    background: #0101DF;
    
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    position: relative;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
        position:relative; left:450px;
    }

    .slideThree:after {
    content: 'OFF';
    font: 19px/26px Arial, sans-serif;
    color: #fff;
    position: absolute;
    right: 10px;
    z-index: 0;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
    }

     .slideThree:before {
    content: 'ON';
    font: 19px/26px Arial, sans-serif;
    color: #fff;
    position: absolute;
    left: 10px;
    z-index: 0;
    font-weight: bold;
    }

    .slideThree label {
    display: block;
    width: 50px;
    height: 40px;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .10s ease;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;

    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    background: #fcfff4;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4',   endColorstr='#b3bead',GradientType=0 );
    }

    .slideThree input[type=checkbox]:checked + label {
    left: 68px;
    }

    .back { width:598; height:95px;  background:url('http://i1159.photobucket.com/albums/p637/Apulo_Cosmas/btn_push01c2x.png') no-repeat;      }

HTML:

    <div class="back" id="toggle"><br/>
    <label for="enjoy_web"></label>
    <div class="slideThree">
    <input type="checkbox" value="None" id="slideThree" name="check" />
    <label for="slideThree"></label>
    </div>
    </div>

    <br/><br/><br/>

    <img src="http://i1159.photobucket.com/albums/p637/Apulo_Cosmas/btn_push01a2x.png"/>​

​