looking for help in image posting

[esparkinfo]

Hello,

this is the url: http://tinyurl.com/d6jqhmz

the code image doesn't adjust correctly when the browser is resized.
in full screen positioned correctly...

can any one fix it? i just fedup with this...



*{
margin:0;
padding:0;
}

.alignleft{float:left;}
.alignright{float:right;}

body{
font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
font-size:14px;
background:#fff;
color:#000;
overflow-x:hidden;
}

h1{
font-size:56px;
color:#5d5d5d; width:1000px;
}

h2{
font-size:20px;
padding:10px 0px 10px 0px;
margin:15px 0px 20px 0px;
}

h3{
margin: 10px 10px 0px 10px;

color:#FFF;
font:14pt Arial, sans-serif;
letter-spacing:-1px;
font-weight: bold;
}

a {
color:#fff;
text-decoration:none;
}

a:hover {
color:#fff;
}

.headerlink a:link {
color:#fff;
}

.headerlink a:hover {
color:#f6c65a;
}

p{
padding:5px 0px;
}

.wrapper{
width:1000px;
margin:20px auto;
}

.clear{
clear:both;
}

.header{
font-family:"Arial", Verdana, Sans-serif; color:#5d5d5d;
text-align:right;
font-size:12px;
top:0px;
width:1000px;
background-color: #000; padding:5px 10px;
clear:both;
margin-top:0px; margin-left:auto; margin-right:auto;
}

.footer{
font-family:"Times New Roman", Times, serif; color:#5d5d5d;
width:1000px;
background-color: #000;
padding:10px 10px;
clear:both;
margin-top:30px;
margin-left:auto;
margin-right:auto;
}

.footer a{
margin:0px 20px;
}

.social-buttons {
width:125px;
margin-top:0px;
margin-right:10px;
padding:0px;
background-color: #000;

}

.main {
float:left;
width:740px;
height:300px;
margin-bottom:30px;
margin-top;30px;
background:#9c9;
}

.sidebar {
float:right;
width:250px;
margin-bottom:30px;
margin-top;30px;
background:#fff;
}




/* Slider Style */

.pxs_container{
width:100%;
height:420px;
position:relative;
border-top:7px solid #fff;
border-bottom:7px solid #fff;
overflow:hidden;
-moz-box-shadow:0px 0px 7px #fff;
-webkit-box-shadow:0px 0px 7px #fff;
box-shadow:0px 0px 7px #fff;
}

.pxs_bg{
background:transparent url(../images/bg.png) repeat top left;
}

.pxs_bg div{
position:absolute;
top:0px;
left:0px;
width:7584px; /*1264px window width times number of images*/
height:420px;
background-repeat:repeat;
background-position:top left;
background-color:transparent;
}

.pxs_bg .pxs_bg1{
background-image:url(../images/bg1.png);
/*left negative 1/8 of ww*/
}

.pxs_bg .pxs_bg2{
background-image:url(../images/bg2.png);
/*left negative 1/4 of ww*/
}

.pxs_bg .pxs_bg3{
background-image:url(../images/bg3.png);
/*left negative 1/2 of ww*/
}

.pxs_slider_wrapper{
display:none;
}

.pxs_container ul{
margin:0px;
padding:0px;
list-style:none;
}

ul.pxs_slider{
position:absolute;
left:0px;
top:0px;
height:420px;
}

ul.pxs_slider li{
height:420px;
float:left;
position:relative;
}

ul.pxs_slider li img{
display:block;
margin:35px auto 0px auto;

}

ul.pxs_thumbnails{
height:35px;
position:absolute;
top:320px;
left:50%;
}

ul.pxs_thumbnails li{
position:absolute;
display:block;
}

ul.pxs_thumbnails li img{
border: 5px solid #FFFFFF;
-moz-box-shadow:1px 1px 7px #fff;
-webkit-box-shadow:1px 1px 7px #fff;
box-shadow:1px 1px 7px #fff;
cursor:pointer;
display:block;
opacity:0.7;
}

ul.pxs_thumbnails li.selected img{
opacity:1.0;
}

.pxs_navigation span{
position:absolute;
width:30px;
height:60px;
-moz-box-shadow:0px 0px 2px #fff;
-webkit-box-shadow:0px 0px 2px #fff;
box-shadow:0px 0px 2px #fff;
top:145px;
opacity:0.6;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
cursor:pointer;
}

.pxs_navigation span:hover{
opacity:0.9;
}

.pxs_navigation span.pxs_prev{
background:#000 url(../images/prev.png) no-repeat center center;
}

.pxs_navigation span.pxs_next{
background:#000 url(../images/next.png) no-repeat center center;
}

.pxs_loading{
color:#fff;
font-size:20px;
padding:15px 15px 15px 50px;
position:absolute;
background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
opacity:0.7;
width:180px;
position:absolute;
top:150px;
left:50%;
margin-left:-90px;
}



/* Text/Description Overlay */

.boxgrid{
width: 760px;
height: 279px;
margin:0;
float:left;
background:#161613;
overflow: hidden;
position: absolute;
top: 35px;
left: 22%;
border: 0;
}

.boxgrid img{
position: relative;
top: -13%;
left: 0;
border: 0;
}

.boxgrid p{
padding: 0px 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}

.boxcaption{
float: left;
position: absolute;
background: #000;
top: 100%;
height: 70px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.captionfull .boxcaption {
top: 260;
left: 0;
}

.caption .boxcaption {
top: 0;
left: 220;
}


Thnaks in advanced.