Test Index   ·   Photo Borders   ·   Table of sliced images - Rounded corners   ·   Sliced images and manually linked   ·   Overlap Images   ·   Create a Watermark   ·   Gif Png Transparency   ·   Buttons-Image Links   ·   Image Names   ·   Image Theft   ·   Lake Applet   ·   Other applets   ·   Slideshow1   ·   Slideshow2   ·   Slideshow3   ·   Galleries   ·   DD Thumbnail Viewer   ·   image map   ·   xara thumbnail   ·   Random Image   ·   LOGO BRANDING   ·   Animated Image   ·   photo with sound


Insert a gif (or png) image with transparency

Step 1.
In order for an image to appear on the web as "floating", it must have a transparent background before it is loaded into your webpage!  Choose a .gif image. If the image does not already have a transparent background, you must use a photo editor to identify or create a  the transparent background.  
(Example photo editing programs:  Photoshop, Paint Shop Pro, Photosuite, etc)
Step 2.
If the image has a transparent background, you can skip this explanation and go to step 3.
When creating  a transparent background there are a few simple rules that should be considered:
The photo program and web browser will only allow one color as transparent.  If the background has shades of the color, only one tone of that color will go transparent
Yellow was chosen as transparency color here, but there were several shades of yellow so the background did not fade out on the webpage!
spaz with not enough transparent

Choose a unique color that does not match any color the image unless you are purposely trying to eliminate that color from the image.
Black was  chosen as transparency color here, but there was black used in the cat so too much faded out on the webpage!
spaz with too much transparent

For best compatibility, make the transparent color simple:
White, Black Yellow, Blue, Green, Red
Use the paintbrush to color the background in a single color
spaz on blue

You must define the transparent color in your photo program and save the file.  Though the process is essentially the same, each program has it's own way of doing it.   
Check your HELP file in your photo editor for specifics.
Two Samples :


(A) In Paint Shop Pro (PSP), from the Color menu, select to 'Set the Transparency' then define the color Image


(B)  In a version of PhotoShop, Select File>export to GIF89a then define the color Image
Photoshop choose a transparency color

The background often changes  to signify transparency.  In Paint Shop Pro, from the Color menu, choose 'View Pallet Transparency'.  This "blocked background" is used by Paint Shop Pro for transparent images.  
Save your image in the transparent mode!

Step 3.
Insert your image into CSB/Trellix webpage.
If you have CSB4, and just put the image into the file, you are already done because there is no Transparency tab for newly inserted images.
If you have Trellix, CSB3 or CSB4 with an image inserted before file conversion, continue:

Right click the image for menu, Choose Properties>Image.
On the Transparency tab, again choose the color you designated as transparent


This check box is only functional on images already set to transparent before inserting into CSB3/Trellix.  

Consider it a toggle switch solid/transparent.
Trellix and CSB transparency setting
The same image of the cat is used in the solid and transparent samples below!
SOLID:  If the check box is left unchecked, the background of the image will show your background color, even though you defined the image in your photo program as transparent!
spaz on blue

TRANSPARENT:  If the check box is checked, the background of the image will be transparent when you publish!
spaz