Skip to main content
Anonymous
January 14, 2015
Question

Text on top of image

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!
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

5 replies

Anonymous
January 14, 2015
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);" >
 
Translate
Jim_Clarke
Jim_Clarke
Level 2
January 14, 2015
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.
Translate
SanfordWhiteman
SanfordWhiteman
Level 10
January 15, 2015
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.
Translate
Jim_Clarke
Jim_Clarke
Level 2
January 15, 2015
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.
Translate
SanfordWhiteman
SanfordWhiteman
Level 10
January 15, 2015
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).
Translate
Terms & ConditionsAccessibility statement

Loading footer...