Melissa Kat wrote:
Create a banner with transparent background like this ...

http://i.imgur.com/Z4QoVsj.jpg

this banner is not "transparent"...simple way to create that is scribe out the size you want,color it of your choice, then add text layer of color you want. Ie  white, instead of black.Also, a >jpg file can not really be "transparent"...layers during the process can be made as transparent ( opacity lowered)...but final output when flattened and saved as .jpg can not be transparent. You would need .psd  or .png for that. Hope that helps

Sourcelight Photography wrote:
When you're satisfied with the look, "flatten" the image (combine the layers), and save as a .jpg.

Everything you wrote looks ok except the flatten and save as .jpg part. To have a transparent background on web it should be saved as .png (In Photoshop, DO NOT Flatten layers, in the drop-down at top of Photoshop screen, just go to "File > Save for web… > switch the default JPEG to PNG-24 in the drop-down menu")

You can also save as .gif with transparent background, but to not confuse with technical stuff, just save for web as .png at the end.

Sourcelight Photography wrote:
When you're satisfied with the look, "flatten" the image (combine the layers), and save as a .jpg.

Steven Burnette Retouch wrote:
Everything you wrote looks ok except the flatten and save as .jpg part. To have a transparent background on web it should be saved as .png

Not exactly. It depends on the intent and how you want to use the banner:

1. If you want the banner + image + logo as a permanent single image - flattening it is fine. So the type, spot color, imge and logo always remain exactly as you see it.

2. If you want the type, spot color and logo to be constant, but will be changing the image on the page, then you don't want to flatten the image, but use a alpha channel so the type, logo and spot color can be used for any image.

Steven Burnette Retouch wrote:

Everything you wrote looks ok except the flatten and save as .jpg part. To have a transparent background on web it should be saved as .png (In Photoshop, DO NOT Flatten layers, in the drop-down at top of Photoshop screen, just go to "File > Save for web… > switch the default JPEG to PNG-24 in the drop-down menu")

You can also save as .gif with transparent background, but to not confuse with technical stuff, just save for web as .png at the end.

My Model Mayhem profile currently features a photo with a semi-transparent text banner; it's a multi-layer Photoshop file, flattened, and saved as a JPEG. Now that you mention it, I do seem to recall having some difficulty in years past getting banners to stay transparent on a web page background.  In that situation, saving it as a .png will preserve the transparency, but a photo is a photo, and once the elements of a Photoshop file have been flattened and saved in a recognizable file format, there's nothing magical about a browser that can "reverse-engineer" the photo, find the constituent elements, and then remove their transparency settings. Note that the example the OP posted is a JPEG.

I guess the question here is what kind of banner on what kind of background the OP was inquiring about.

Steven Burnette Retouch wrote:
I am not sure if I am thinking the same as some others or the OP when I am thinking .png with transparent BG (background). The example below better illustrates what I mean (notice how the .png examples on left side can work on any color web background. On the other hand, the .jpeg on right side would only look right on the white bg or you would need save 3 versions with different bg colors to work. Using the .png, one file can work on any color bg and the website's bg color can show through):

this explains it much better than how I tried to say the same thing..jpg files wont assume any transparency...png will! Good job in how you put this together for the op!

Steven Burnette Retouch wrote:
I am not sure if I am thinking the same as some others or the OP when I am thinking .png with transparent BG (background). The example below better illustrates what I mean (notice how the .png examples on left side can work on any color web background. On the other hand, the .jpeg on right side would only look right on the white bg or you would need save 3 versions with different bg colors to work. Using the .png, one file can work on any color bg and the website's bg color can show through):

Good illustration. Indeed, if the OP's intention was to create an image with "see-through" elements that will always allow a web background to show through dynamically, .png is definitely the way to go.  Her initial inquiry, however, was about how to make a "banner with transparent background" and the example provided showed a semi-transparent text banner on a static photo with no indication that the bunny head graphic was transparent.  Since she hasn't been back to comment either way, at least this discussion might be useful as a general tutorial for others.

Looking at the OP's personal website, I suspect that she was asking about how to make the text banner on this page--

http://www.melissakat.com/about-me.html

--transparent to the underlying image.