FG image not working

My understanding of the FG image under side settings is that uploaded text/images fall behind the FG image. Currently, our uploaded text/images fall on top of the FG image. See pics below.

That really should not be. FG mask is applied on TOP of everything. You totally sure you've uploaded your mask file as a FG and not as a BG?
Seeing which image you tried to upload would also help.
In general, an FG image should just be an image as big as the whole design with transparency in the areas you'd like users to be able to draw

Alex,
I am positive that I uploaded a foreground image with a transparency in the middle in the shape of our product.

The I need to see the product. Can you provide a link, or at least the full name of the product so that I can find it in your admin panel?

Here's the link to this specific product, but it is happening on pretty much all products.

http://designer.realtimedesigner.com/northstarflags/index.php&tng=Y3BpPTc5NjAzJmNwaXM9MzMwODkx

Found it.

You caused an issue in your HEADER CODE FOR DESIGNER. Specifically, this style block you have on top:

#userbuttons_addtext, #userbuttons_addshape, #userbuttons_addclip, #userbuttons_undo, #userbuttons_redo, #userbuttons_cleardesign, 
#userbuttons_indesigner, #userbuttons_addcustomclip, #userbuttons_managedesigns, .images_all_fg_class{
z-index:1;
}

1st of all, having style blocks in header that affects the designer can be very risky. But here, you problem is you reassigned the z-index (which is basically the "layer") of the images_all_fg_class.
In short, your style pushed the FG mask layer of the designer down to ground level, just as if it was the BG image.
So, to solve your issue, just remove the images_all_fg_class entry from your code

That did it, thanks!