html - How to alter the background size of the images in a javascript slideshow -


i have basic slideshow, 3 pictures, cycle automatically @ 2.5 second interval. however, slideshow in top of webpage, stretches picture. attempting set image size full , use image sprites align image liking. slideshow working images remain stretched. there way make images in slide show not stretch?

here code:

<head> <style type="text/css"> .bgpic {     height: 50%;     width: 100%; }  #pict {     width: 100%;     height: 100%;     background: url('/junk/1.jpg') 0 -150px;         -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover;     background-size: cover; } </style>  <script type="text/javascript">     var image1 = new image()     image1.src="/junk/1.jpg";     var image2 = new image()     image2.src="/junk/2.jpg";     var image3 = new image()     image3.src="/junk/3.jpg"; </script> </head>  <body> <div class="bgpic"> <img src="/junk/1.jpg" id="pict" name="slide" style="-webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover;     background-size: cover;"> <script type="text/javascript">     var step=1;     function slideit() {     if(!document.images)     return;     document.images.slide.src=eval("image"+step+".src")     document.getelementbyid("pict").style.backgroundsize="cover";     if (step<3){     step++;     }     else {     step=1;     }     settimeout("slideit()", 2500)     }     slideit(); </script> </div> </body> 

nothing have tried has worked. please help.


Comments

Popular posts from this blog

java - How to specify maven bin in eclipse maven plugin? -

single sign on - Logging into Plone site with credentials passed through HTTP -

php - Why does AJAX not process login form? -