|
|
|||
I try to fit a "javacript slide show to screen" but the images doubles to screen!
Can't stretch background image to screen! javascript problem?
in css the width and the height of the div that contains the javascript is at 100% but the image dosen't fit to screen... the image doubles to screen here the result of this: http://www.3www.gr/test here is my code.... <div id="wrapper"> <div id="back-ground"></div> <script language="javascript"> var speed = 4000 var Slide = new Array() Slide[0] = 'url(image/1.jpg)'; Slide[1] = 'url(image/2.jpg)'; Slide[2] = 'url(image/3.jpg)'; var t var j = 0 var l = Slide.length var p = Slide.length var preLoad = new Array() for (i = 0; i < l; i++) { preLoad[i] = new Image() preLoad[i].src = Slide[i] } </script> <script language="javascript">runSlideShow();</s… </div> 4 Replies
first thanks for your ansers...
i have try to put your code and yes the image now doen't repeat to the screen but now it doesn't fit to screen! see the result again here: http://www.3www.gr/test you have any idea? sorry for my bad english
It looks like you fixed this now, so that the background image width is 100% and height is 100%, but I noticed that this looks weird when you resize the browser; the image gets distorted, stretched and squished. See screenshots below:
![]() ![]() I would change it so that the background image width is 100%, but leave the background image height at auto, so that the image will resize naturally. Here's a screenshot of what that looks like if you resize the browser: ![]() Also, the style you're using now only targets mozilla browsers, like Firefox. I would add a rule to target webkit browsers, like Chrome and Safari. I would change the css to: #wrapper #back-ground {
-moz-background-size:100% auto;
-webkit-background-size: 100% auto;
}
|
|||
|