top left
The HTML Source Logo


 html
Top Right
    
 Getting StartedHow Do I...TroubleShootingPromotionContact Us
 html
HTML
SEARCH THE SITE
advanced search



CATEGORIES
Home
Getting Started
HTML Cheat Sheet
Webmaster Tools
HTML Help Forum
Color Codes
Link to us









































bottom
HTML HTML HTML HTML
How do I make an image background transparent?


You can make the background of a gif image transparent so that the background will blend into a web page:



This can be helpful if you have a multi colored background on your web page, instead of having that ugly square background, you can blend the image in with your web page.

Choosing An Image

Choose an image with a single background color, if an image has a multi colored background, only one of those colors will become transparent.

YES
NO
Make sure the background color does not appear in the image it self. When you make the background of the image transparent, every part of the image with that same background color will be transparent.

How to do it

To do this, you need an image editing program, not just any image editing program, one that can make transparent images. In this tutorial, well be using Paint Shop Pro. You can obtain paint shop pro through our download center by CLICKING HERE.

If you already have a program that can make transparent images you can use it, but it will be harder to follow along because this tutorial explains how to do this specifically using Paint Shop Pro.

By now you should have Paint Shop Pro or whatever image editing program your going to use open, right? Good!

Now open the gif image that you want to make transparent, you can do this by going to File, then down to open, and choose the image.

Now, click on the Dropper Icon as seen in step 1 of Figure 1-1

Next, position your mouse over the background area of your image, and the RIGHT click. (Don't left click, right click) as seen in step 2 of Figure 1-1

When you do this, you should see the background color appear in the background color palette as seen in step 3 of Figure 1-1.

Figure 1-1


Next, click on the colors tab, then go down to Set Palette Transparency, as seen in Figure 1-2

Figure 1-2


If your image has more than 256 colors, a message will come up saying you need to reduce the image to a single, paletted, background color, click YES as seen in Figure 1-3. Then the Decrease color depth window will come up, click OK on that.

Note:   If your image is already under 256 colors, you wont get these 2 messages at all...

Figure 1-3


Figure 1-4


Next, click on the Set the transparency value to the current background color option, and then click OK as seen in Figure 1-5

Figure 1-5


The background of your image is now transparent. Save it, and upload it to your web page.

Note:  The background does not appear to have changed at all, but will appear transparent on a web page.


< BACK







Company   |   Careers   |   Partners   |   Advertising   |   Help
Privacy Policy   |   Trademark Notices   |   User Agreement
2001 TheHTMlSource.com, INC. All Rights Reserved.



Site hosted by Angelfire.com: Build your free website today!