Remove image background in website?

Question

How do I make the background in an image transparent? Most of my images have a white background. When I use them in my website with my body background color black it looks awkward.

I have unsuccessfully tried using Fireworks magic wand tool to remove the white background. I have also applied the CSS transparent property but it does not work for me either.

What is the best means of making the background color of an image transparent?

Answer 1

What image format you should use

You should use PNG pictures with alpha channel, so called RGBA image.

Save your work as PNG and make sure it is saved with RGBA colors.

Wikipedia.org, Portable Network Graphics

How to, using GIMP (should be similar with photoshop)

• Open your picture file with GIMP.
• If your picture layer does not contain alpha channel add it by right clicking on layer and selecting "Add Alpha Channel".
• Use "Fuzzy Select", "Select By Color" or "Scissors Select" tool to select backround area.
• Hit delete.
• Save results as PNG format with RGBA colors.

It should look something like this after you're done with it:

Few notes

• Play around with mentioned selection tools to learn which one to use in which situation.
• Also pay attention to tool settings especially with fuzzy and color selection tools.
• If your picture contains blurred transitions between subject and backround, you should try to make them so with final picture too. You could use