Table Background Slideshow - With Smooth Fading Slide Transitions

Hello everyone!

I had part of my question answered on this page, however I still need the other part of my question answered.

I am trying to get a smooth fading transition when the image changes.

The page below shows an example of what I am looking for besides it is being done with an image src. I need to have this done with the background image.

I am looking for the smooth fade in and out that is the sample called "Fading one image into another" located at

I am doing it this way because I want to have information on top of the table.

I have attached the code that I have so far.

Thank you very much!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<style type="text/css">
#bslide {
        background-attachment: fixed;
        /* Use center center in place of 300 200 to center bg image*/
        background-repeat: no-repeat; 
        background-position: top left;
<script type="text/javascript">
        function painter() {
                //Background Image Slideshow- © Dynamic Drive ([url][/url])
                //For full source code, 100's more DHTML scripts, and TOS,
                //visit [url][/url]
                //Specify background images to slide
                var bgslides = [],
                        processed = [],
                        inc = 0,
                        speed = 3000,
                        dom = document.getElementById ? document.getElementById('bslide') : document.all['bslide'];
                bgslides[0] = 'images/1.jpg';
                bgslides[1] = 'images/2.jpg';
                bgslides[2] = 'images/3.jpg';
                //preload images
                for (inc = 0; inc < bgslides.length; inc += 1) {
                        processed[inc] = new Image();
                        processed[inc].src = bgslides[inc];
                inc = 0;
                function slideback() {
                        // This next statement can be removed for production
                        window.status = 'inc = ' + inc + ', slide = "url(\'' + bgslides[inc] + '\')"';
               = 'url(' + bgslides[inc] + ')';
                        inc = ++inc % processed.length;
                slideback(); // Show initial image
                window.setInterval(slideback, speed); // Trigger periodic image changes
        window.onload = painter;
<table id="bslide" style="width: 800px; height: 500px;">
<td valign="bottom" >
testing text ontop </td>

Open in new window

Who is Participating?
s8webConnect With a Mentor Commented:
Jquery is the answer. well, jquery and supersized 2.0. You'll have to drop what you have, but in the long run it will be less work.

Live demo:

It's customizable , you don't have to have the controls, ribbon, etc.
ndonhauserAuthor Commented:
Thank you very much! I have modified this solution to fit my needs.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.