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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ndonhauserAuthor Commented:
Thank you very much! I have modified this solution to fit my needs.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.