Jump to content

I try to fit a "javacript slide show to screen" but the images doubles to screen!

aggelos's Photo
Posted Mar 30 2011 04:55 PM
4003 Views

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>

Tags:
1 Subscribe


4 Replies

0
  rachel.j's Photo
Posted Apr 01 2011 06:45 AM

It looks like the image is showing up multiple times because your background image is defaulting to repeat. If you add this to your CSS, it should fix the repeating problem:

#wrapper #back-ground {
    background-repeat: no-repeat;
}


I hope that helps!

Rachel
0
  aggelos's Photo
Posted Apr 02 2011 11:50 AM

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
0
  rachel.j's Photo
Posted Apr 04 2011 08:06 AM

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:

Posted Image
Posted Image

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:

Posted Image

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;
}

0
  aggelos's Photo
Posted Apr 05 2011 04:10 AM

it works! i love you!