How to overlay text on an inline graphic?

I have a client that wants to send out emails using their letterhead inline and have a letter typed up over it.
Does anyone have any good suggestions regarding what code to use?
Looked around online and did not find anything that works.
jplatovskyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
Something like this?  http://jsfiddle.net/99hp42tb/2/

Note that:
1) The background of #inline-container will be in front of the image
2) The width of #inline-container will be limited to the natural width of the text, unless told otherwise

Alternatively, you can use an image processor on the server side to add the text dynamically.  In that case, the text will actually be part of the image (i.e., not selectable)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jplatovskyAuthor Commented:
Here is code that works in Dreamweaver but when i send this out only the box and text appear.

<html>
      <head>
            <title></title>
            <style type="text/css">
div.background {
    width: 680x;
    height: 920px;
    background: url(http://byqueens.org/resources/byqletterhead3.jpg);
    background-size: 680px 920px;
    background-repeat: no-repeat;
    border: 2px solid black;
}

div.transbox {
    width: 600px;
    height: 180px;
    margin: 220px 215px;
    background-color: ;
    border: 1px ;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 10px 20px;
    font-weight: bold;
    color: #000000;
}            </style>
      </head>
      <body>
            <div class="background">
                  <div class="transbox">
            <p>Sivan 5775</p>
            <p>June 2015</p>
            <p>Dear Parents,</p>
            <p style="text-align:justify">
                        Before we end this exceptional academic year, we want to take this opportunity to thank you for working with us in making the Bais Yaakov experience a positive, warm and nurturing one.</p>
                        <p>
                              <font face="Comic Sans MS" size="3">Here&#39;s a view of BYQ</font></p>
                  </div>
                  <p>
                        &nbsp;</p>
            </div>
            <p>
                  &nbsp;</p>
      </body>
</html>
Steve BinkCommented:
Ah, this is for email.  This may not be consistently possible.  Email clients vary widely in what they actually support.  The standard practice is to keep style and flashiness in general to a minimum in HTML email.
jplatovskyAuthor Commented:
but yet people say it should work
Steve BinkCommented:
"Should" is perhaps the most overused word in this industry.  And it likely will work in specific clients.  Unfortunately, you will not be able to depend on that across all platforms or applications.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.