Ok, I know i'm missing some stupid little mundane detail but for the life of me I can't figure this out.

I'm revamping some small detail stuff on Cubicle101.com, one of the details i'm hashing out is a background image.

The background image isn't the problem, it's the nav buttons at the top of the page.

What i need is to edit/recreate those images so that the background to them does not exist or is transparent so the background image will show correctly.

A "for instance" is the nav button for the "archives". around the image is a rectangle background colored the same as the background of the page. So when I add the background image all the nav buttons have that solid color rectangle around them.

not sure if i'm explaining this well enough but if anyone has the solution to this it will save me countless hours of searching and trial by error

i think i understand what you mean just open the button image then open a new transparent file and copy just the button on to the transparent one that should solve your problem but make sure you save the image as a gif (or psd i think i know gifs work) jpegs don't work

Greek's on the right track. Do you have the original PSD's of each image?

If you have the original PSD's (presumably with a solid navy background layer),

1. In the Layers pallete, click the eye icon next to the navy background layer to hide it. Then you'll get a checkerboard pattern where the navy background used to be.
   
2. Do "File" / "Save for Web..." and for the "Settings" dropdown, select the GIF option with the lowest number of colors that doesn't screw up your image. "GIF 32 Dithered" should probably work fine.

If you don't have the original PSD's and you're just working from the JPEG's that are on the site now, you can still get it to work just fine.

1. Open the JPEG
2. From the "Layer" menu, select "New >" and "Layer from Background". In the popup dialog, hit OK.
3. Press "W" on your keyboard to select the Magic Wand tool
4. In the options under the menu bar up top, select the leftmost square icon (it'll say "New Selection" if you hover over it), set the Tolerance to around 30, Anti-aliased off, and Contiguous on.
   
5. Click somewhere on the navy blue background and press the keyboard's Backspace key to delete the background. Repeat in other corners if necessary. The edges may look a little jaggy but should look fine if your page background is similar to the navy background (which it is).
6. Do "File" / "Save for Web..." and for the "Settings" dropdown, select the GIF option with the lowest number of colors that doesn't screw up your image. "GIF 32 Dithered" should probably work fine.

Hope this helps!

greekplaya is right; the image will need to be saved as a gif...i'd be happy to help if you would like..

that's the mundane detail i was missing, i was saving as jpg.

switched to .gif and it worked like a charm. thx for the help

-rep all around-