The above Longwood logo is an example of a transparent .gif image file.  To do this effect, from within your graphics program (Image Composer, Photoshop) you must select one color in your picture that represents all of the areas that you want to show through from the background where you will be placing the picture.  You will find the option to select that color when you save as a .gif file with your graphics program such as Image Composer or PhotoShop.  Remember that using complex colors for your background can lead to problems.  More complex colors in digital pictures can actually be a few different colors mixed up to create a different shade or color.  This can result in a "grainy" look. For reasons why, see below.   Many programs also have a "Save for the web" option that will also create transparent .gif files.

This (below) is what the original looked like.  I made the white areas to be transparent in the options when I saved the above file in .gif format.

The brownish parchment paper background is a .jpg file that tiles to cover the background of the page.  Be sure that your backgrounds are not intrusive to your content and allow for good contrast with your text or other pictures.

This "Home" logo below is the same "Home" logo that I use in my site navigation to the left.  The logo on the left is a .jpg file with a white background, because all of my other pages have white backgrounds. 

It has been saved as a transparent .gif file with the white being the transparent color.  Even though the white is gone, and there is not really any white in the main part of the button, it still looks grainy.  Why is that?  (answer below)

transparent .gif image	.jpg image

 (Answer) The picture is grainy because .gif files can only show 256 colors.  The logo has MANY colors in it and many were removed as the file was saved to the .gif format.  That causes the graininess.