Text on top of image

[Anonymous]

Pardon me if this is a rookie question, but I haven't been able to figure out how I can add text on top of a background image in the email editor. Seems like you should be able to add a table on top of an image or some other way to achieve this. When it is all static text, I just do it in Illustrator and add the image to the email complete with the copy, but there are times when I need to use dynamic text such as a Lead Owner/Default for signature, etc.

HELP!

[Anonymous]

HI Heather - although email programs don't always like backgrounds in tables you should be able to add a background image to a table by using the background="image url" in the table tag. ex. <table width="200" background="http://pages.company.com/imagecode.jpg" >
You can also use CSS styles to add a background image - same general idea  <table width="200" style="background: url(http://pages.company.com/imagecode.jpg);" >
 

[Jim_Clarke]

Heather as a best practice, you should utilize an image design application (photoshop) to add the text onto the image. Far less code to deal with.

[SanfordWhiteman]

As @Shannan notes you can think of the task as adding a background-image to text, not the other way 'round. And its use is not llimited to tables; for example, a simple A tag can have 

style="background: transparent url(http://example.com/img/background.png) center center no-repeat;"

etc.

I strongly disagree with @Jim C that burning text onto images is a best practice. Creating manageable templates is key, and hard-coding text onto every image is hardly manageable -- and of course defeats any attempt at dynamic signatures.

[Jim_Clarke]

Maybe I didn't understand the question on first pass. If you're trying to have a bg image on a dynamic signature string I would agree with the other suggestions. I would suggest testing several mail clients and various string lengths for the dynamic attributes. I typically prefer not having a by image, as it's so much easier to have an adjacent image next to a dynamic text string.

[SanfordWhiteman]

I also don't see a particular advantage to having a background image, but hey, it's an aesthetic decision.

@Heather P remember that text needs to be legible even if the bg doesn't load, since you cannot assume mail apps will load images.  Meaning you want to set a fallback background-color (in my sample the bgcolor is transparent).