Fading background images in and out

Re: www.dijitalrealm.com/JCMusic/BGSlideShow.html
I have a simple code (the easiest one for me to understand and implement among the resources I found online) that toggles between 2 background images. How do I modify the code so that the images fade in over each other for about 1 second? Also how do i eliminate the 5 sec pause before the first image appears? If there's an altogether different code that accomplished my goal, that of course would be fine as well.

body{
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
}
</style>

<script language="JavaScript1.2">
var bgimages=new Array()
bgimages[0]="images/RitaHayworthCameo.jpg"
bgimages[1]="images/GirlWithHeart.jpg"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++){
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide(){
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",5000)')

</script>

</head>

<body>
</body>

Open in new window

Thanks!
John

To eliminate the 5 second lapse, you'll need to change this line of code:

var inc=-1

Open in new window

to these two lines:

var inc=0;
document.body.background=pathToImg[0].src

Open in new window

To make them fade in over each other is a much bigger problem. Since your body element can only have one background image, you can't fade them in over each other (this would require both backgrounds at the same time.)

What you can do is have 2 divs within the body tag, that take up the full space of the body tag (ie, width and height both 100%), each one of them having a background image. They can both start with full opacity (which would mean we would only see the image on top), then, over a 1 second period, animate the opacity of the top image down to 0. Then you could swap the z-index of the divs (putting the top one on the bottom), then changing that div's background to the next image, and setting the opacity back to full. Then just repeat the process once every 5 seconds.

Thanks, Jan. I found something online based on your parameters and was able to tweak it so that it works with other content. You can see the page and the source code here. Please let me know if there's a way to make it more elegant and "best practices" as possible.

Thanks!
John

Forgot the link: http://www.dijitalrealm.com/JCMusic/SweetLittleRomanticsKisses.html. It's on a 10 second cycle.

Fading background images in and out

Premium Content

Premium Content

Explore our Suite of Services