How to Configure Slideshow Background

[kuau]

1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm

3) Describe problem: Is it possible to have a transparent background on the slideshow? If so, how? Thanks.

[jscheuer1]

Use the fadecolor property, ex:

slides.fadecolor='transparent';

But you probably don't really want that. In cases where folks ask this question, they usually have transparent and/or partially transparent images and/or images of various sizes and they want the background of the page or of the area where the slideshow is to show through.

If you use a transparent fadecolor for that, you will have bleed through of the images in the slideshow. So what you need to do is set the background-image of the slideshow to be the same as the background image you want to show through. And position it via the background-position property so that it lines up with that background image.

This cannot always be done, it depends upon how fluid the layout is. If it's too fluid, no matter how you line things up, they'll never be in sync for all window sizes. Or, if what you want to show through is more than a single background image, then it can be more complex - you would need to make an image that represents that, or again - perhaps impossible. Even when it can be done (be it a simple background image or something more complex) and they can line up, a separate conditional background-position style for IE or at least some version(s) of IE may be required. It helps to have a standards compliant page.

To start out use css style. The style hook for this for the for the first slideshow on a page or if it's the only slideshow on a page would look something like so:

#master0, #master0 #canvas0_0, #master0 #canvas0_1 {
	background-image: url(mybg.jpg);
	background-position: -22px -100px;
}

Replace the image - mybg.jpg, with the background image behind the slideshow. Adjust the left (-22px in the above) and top (-100px) coordinates so as to line things up. Trial and error on the coordinates will likely be required.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[kuau]

Dear John:

Thanks very much! I got it to look perfect on my monitor but, as you say, the horizontal position would necessarily vary from monitor to monitor. So I'll have to check it out on other monitors. Does the css above correct the transparent bleed somehow? It seems as soon as I did that, the bleed went away.

Cheers, e

[jscheuer1]

Different monitor sizes might not matter. It depends upon the layout. You can check on a single machine though by resizing the browser window. If it looks OK in different sized browser windows, it will probably look OK on different monitors. If it doesn't work in different monitors/window sizes, unless the layout is changed - made less fluid, it cannot be remedied. When different monitor/window sizes don't matter, what might matter is the browser. There might be slight differences between Firefox and IE. If so, IE can have a conditional style set. If that's a problem, let me know.

Although it does eliminate it, the css doesn't per se correct the bleed. It substitutes a background image so that the background is no longer transparent. By using the same background image as the one you wanted to show through, it only looks like it's transparent. In fact, in case the background image doesn't render for some reason, the fadecolor (which is the background-color) should be set to a solid color, or not used (it defaults to white). That way there will still be no bleed in those situations. The fallback fadecolor/background-color would ideally be set to the same fallback background color for the element behind the slideshow (all elements with background images should also have a background color set, just in case the background image cannot render). Because, if the background image for some reason doesn't show up for the slideshow, chances are it won't show up for the element behind it either.

[kuau]

I played with the window size and it became clear that it cannot be remedied. But I did change the fadecolor, as well as all the background elements, to a solid color. Thank you for such a clear explanation. Much appreciated.