Embed CSS images

You mean having CSS images included in the message itself?

Great idea! I've always wanted that too. Please feel welcome to submit a patch :)

Updating version and making the title more informative

This is a lot harder than it looks... url()s in CSS are relative to the CSS file, not the site. We currently put the CSS into an inline <style> as part of theme_mimemail_message(), throwing away any path information. I think we could simplify things dramatically by generating absolute URL <link> tags and not attaching or including CSS in the message at all.

I think this logic could even be applied to all inline attachments. Whats the reasoning behind attaching things at all? Not meaning to be critical, just curious. It adds a lot of complexity.

Right now, from what I can tell, the code doesn't really handle it correctly either. If you pass an image tag <img src="/test.gif" /> it would appear to simply pass "test.gif" to _mimemail_file_attach(), which just looks for it in the mimemail module directory. I guess this is a separate issue, but we could fix both and simplify the code considerably by just generating absolute URLs.

There are lots of valid reasons for delivering the node's content as a whole. Many mail readers can't/won't include remotely-hosted images ( they're web bugs! ), or perhaps the user is offline on otherwise unable to access the images. Or perhaps you don't want to account for making sure the original node/file hasn't been removed.

When I originally wrote send/mimemail, the design goals were to ensure that product sales lists rendered beautifully, independently of the MUA's decision to (not) show images. And now, mimemail/mlm is being used for online discussion participation where some of the users are in 3rd world countries, and aren't guaranteed an always-on connection.

Back on-topic, I agree with your CSS assessment for inline attachments. And that it's relatively non-trivial. Which is why I only gave it a +1 :)

Another issue with this is that when we do pull in all of the theme css we'll also pull in most if not all of the theme's images too, making the emails massive. So, doing this will basically necessitate the user providing a custom mail.css or message theme, because otherwise we'll basically be shipping major portions of the site's theme out with every email. The solution would be to either provide a default mail.css, or specifically to not load images from the theme css. I think providing a default mail.css might be a good idea, since people have had issues with themes whose CSS doesn't play well with the email. But again, if there is an important reason behind using the theme's CSS, perhaps we can allow the user to pick?

Agreed.

The include-the-kitchen-sink approach is fairly ham-handed and heavy, but it works more often than it doesn't. Most folks I've worked with who deploy mimemail really appreciate that it looks "almost" like their site and it only takes a small amount of tweaking to make things right.

I don't want to give this up, which is what would happen if we shipped a mail.css file that didn't match any theme. This is also a problem when other modules include CSS files to format fields, etc. in a way we don't account for.

It would make me happy if we could extend those benefits by making emails look as close to web output as possible with zero effort, but it would also make me happy to slim down the messages significantly. And I'm a system administrator by trade, so I'm not just saying that.

Maybe we can compromise and set CSS images to be fully-qualified instead of baking them in. But that seems inconsistent with other stuff we've done.

I dunno. I want this feature, but I don't want to tack on an extra 100kb to each message for it.

I don't really understand why CSS is part of the discussion. But maybe that's because I use embedded graphics in email only sparingly, not trying to literally recreate a website experience. But anyway, the proper way to do this (and solve the disconnected reader problem while you're at it), is to base64-encode the image, include it as a MIME part inside a "multipart/related" part, and give it a unique string called a cid. Then you can use the cid instead of a URL in your message body, like this: <img src='cid:12345678900AB'> You can find all the dirty details in the RFCs...

http://www.faqs.org/rfcs/rfc1341.html
http://www.faqs.org/rfcs/rfc1521.html
http://www.faqs.org/rfcs/rfc2046.html

Thanks As If!

Mime mail is already doing what you describe for images that are embedded in your message. Per the issue title, we're also considering ways of embedding css images (e.g. background images) into the message as well.

Because the theme's CSS is already being included, this is a natural extension. And it would alleviate certain issues that crop up (e.g. we'll have a black background color but a light-colored background image, which gets lost in the translation)

If you re-read the other posts in this topic, you'll find we're not totally sure this is even a good idea, even though it's a good idea ;)

I try to patch the mimemail module to allow this for 4 days, then I
I have read about the css_emimage module, http://drupal.org/project/css_emimage, i try another day to make compatible with the mimemail and fail, I affray I not longer go with this, I'm not good enough, now I'm convince.
If any of you has a solution please let me know

@neopulse: Here is my patch against current HEAD. Note that there is a lot to do before we can implement this in the right way.

Usage:

• Enable the CSS image embedding on the module settings page.
• Be sure to use a custom mail.css.
• Use relative path for the images in relation to your default theme.

Example directory tree:

• sites/all/themes
  • mydefaulttheme
    • images
      • background.jpg

So in your mail.css:

body {
  background-image:url(images/background.jpg);
}

Sorry, but doesn´t work for my. I even try a new installation, with garland theme, and nothing. Please, check the patch. The property background-image appear with no argument, see

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body id="mimemail-body">
    <div id="center">
      <div id="main">
        <h2></h2>
<div id="cuerpo">
<div class="twoColFixLtHdr">
<div id="container" style="width:780px;background:#FFFFFF;margin:0 auto;border:1px solid #000000;text-align:left;">
<div id="header" style="height:156px;padding-top:0;padding-right:10px;padding-bottom:0;background-image:;background-position:20px center;float:right;height:40px;width:700px;background-repeat:no-repeat;margin-right:-20px;font-size:0.8em;">
<h1><img width="371" height="63" alt="Logotipo SolucionesPymes" src="cid:4435e355bb8e5981cc703de3917c9f1e@localhost"></h1>
<div class="barra">Primer boletin promocional. Julio 2010</div>
<div id="subBarra" style="height:15px;margin-top:-33px;padding-left:50px;">
<a href="http://localhost/www.google.com" style="font-size:0.8em;color:#666;text-decoration:none;">Ver en línea</a> | <a href="http://localhost/www.google.com" style="font-size:0.8em;color:#666;text-decoration:none;">Cancelar subscripción</a> | <a href="http://localhost/www.google.com" style="font-size:0.8em;color:#666;text-decoration:none;">Enviar a un amigo</a>
</div>
............................
.........................

The rest was omitted by me

What kind of path did you use for the image?

I use the path you recommend, base path in the default theme folder.
I try again in a fresh installation, and appear another issue, it include the image but not show in the mail.
In the next example i create a div with background image for comparison propose I insert another div with the same image.
Node code to send as mail

<div id="otra">testing the patch</div>
<div><img src="/sites/default/files/images/aaa.jpg" width="530" height="100" />a test´s text</div>

The CSS in the mail.css code as follow

#otra{
	color:#F00;
	background-image:url(images/aaa.jpg);
}

I put the image aaa.jpg inside the image folder on the default theme.
The result, the first (background image) is inside the mail but not show and the second is corrected show.
Here the mail

...cut all the server header
--ef656ce8f95cabc4bbdf3560941b2641
Content-Type: text/html; charset=utf-8
Content-Disposition: inline
Content-Transfer-Encoding: 8bit

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body id="mimemail-body">
    <div id="center">
      <div id="main">
        <h2>Primero</h2>
<div id="otra" style="color:#F00;background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QAWRXhpZgAATU0AKgAAAAgAAAAAAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCABkAhIDASIAAhEBAxEB/8QAHQABAQADAAMBAQAAAAAAAAAAAAUCAwQGCQoHCP/EADEQAQAABAMHBAIBAwUAAAAAAAABAwQFAgaBBzEyQXGxwQgRQvAJIRJER1FheJGh0f/EABoBAQEBAQEBAQAAAAAAAAAAAAAFAgMBBgj/xAAxEQABAgELAwMDBQEAAAAAAAAAAQIDERITMVFTcZGS0eEEIbEFMsEUQYEiI0JS8GH/2gAMAwEAAhEDEQA/APkQkR3+/wC9+/3/ANPb/jkryOevj79ijyOevh7mdlv43/SvnjZts+ztmH8nfp+yFmDOOR8qZpvuRLzT7OcV4yTeMw2G33a55Su2Kt9QFnrcVzy3W1c+zV8auz2mqjVUc2NRbKGb/OllfufpILHKkkNi9q1RtciSVphbaXes9R6P02Gx/VK9qRHq1qw4EWMqqk2WVIMOIra61REWqVD1HyOGMPf3hCMO37+8297q5f4vPSDhhGEPyx+m2Pv7f02zD/H+5GO96itpeV7PkfaPtAyXl/Nltz7YMn52zXleyZ6s0KXDZ86WfL99r7Tbc2WqFFcrzRYbbmOipJF4oYUl4utLClrJUKe5V0r+FVNtMgwkaiUUKVE7/oYvhDzoPV/T/Unvh9I6I90Ns9yROmjwUkdIiKixobEVauzVVbau3hIDdDCuoehuxTmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgMJnBi6M2EzgxdHiwoUi/tQ6l/g3YSJYmSE6bwx17RSp8eL2/XT9fH/399f2qzeCOvaKTP3YvvKKN1MKGiJJDZV/VtqSfbtUZciTV7Jklpw7wEuYz+rdKbHGa3+rck/32TI6JHPXw+pv095V2i1GwXYlU0P4UfT9tUoZ+yLZvOo9qN52q+le3XjaVSzMm2XHT59u1vzBkCszBQXPOMnFgzFX0d8rKq8UtVcZsi51M+uwTpuP5ZJHPXw/pnL/qz9VGXLPasu5e9S/qAsWX7BbaGy2KxWfbLtGtlns1ntVLJobZabVbKLMkiit1st1FIkUdDQUcmTS0lLJlU9PKlypeDBCt0LkaveWpJERE+yJb/wA7diP616XH9TgwWQPp0WFEVyrHf1bEkWb7fpY8B0qSfyVyWJLX9MmHJ+03n+Br024d394PSDHts45PmM2+yaqn267aqeuyFbdldbI2tbR5NZsws1ZZ7jZ9nFVKzjecFRkK1XDL9NR2CutuUJuHHl6hrLHR0lnqqW3Sp9tppFFjkSsHmEn1k+r3FCMY+qr1Ix9vaH7257T48v3vzR/1yfg9
5v
N3zHeLrmHMN1uV9v8AfblXXm+Xy811VdLxebxc6mbW3O63W5Vs2fW3G5XGtnz6yurqydOqquqnTaiomzJ0zHjxWmKitRUSSXv/AJEREl4OPoPovU+lxYz4/wBLJEhtalA/rXLKk1e/1XUx2ydlT9LUW1VJoDR9OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABhM4MXRmwmcGLo8dUuC+ATpvBHXtFJn7sX34xVpvBHXtFJn7sX34xReqqTD5Qy/wBq/jyhwgJRxOiRz18LEjnr4R5HPXwsSOevhR6StMF8IdWVLj8IUZG7F1h2b2iRuxdYdm9ch+xuBsANgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCZwYujNhM4MXR46pcF8AnTeCOvaKTP3YvvxirTeCOvaKTP3Yvvxii9VUmHyhl/tX8eUOEBKOJ0SOevhYkc9fCPI56+FiRz18KPSVpgvhDqypcfhCjI3YusOze0SN2LrDs3rkP2NwNgBsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYTODF0ZsJnBi6PHVLgvgE6bwR17RSZ+7F9+MVabwR17RSZ+7F9+MUXqqkw+UMv9q/jyhwgJRxOiRz18LEjnr4R5HPXwsSOevhR6StMF8IdWVLj8IUZG7F1h2b2iRuxdYdm9ch+xuBsANgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCZwYujNhM4MXR46pcF8AnTeCOvaKTP3YvvxirTeCOvaKTP3Yvvxii9VUmHyhl/tX8eUOEBKOJ0SOevhYkc9fCPI56+FiRz18KPSVpgvhDqypcfhCjI3YusOze0SN2LrDs3rkP2NwNgBsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYTODF0ZsJnBi6PHVLgvgE6bwR17RSZ+7F9+MVabwR17RSZ+7F9+MUXqqkw+UMv9q/jyhwgJRxOiRz18LEjnr4BR6StMF8IdWVLj8IUZG7F1h2bwXIfsbgbADYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwmcGLoDx1S4L4BOm8Ede0UmfuxffjEEXqqkw+UMv9q/jyhwgJRxP//Z);">testing the patch</div>
<div>
<img src="cid:e7e80eeec1c3a2eb368bceef988d5012@localhost" width="530" height="100">a test´s text</div>


   <p class="newsletter-footer"><a href="http://localhost/newsletter/confirm/remove/0e946b24190t1">Unsubscribe  
from this newsletter</a></p>

- - - This is a test version of the newsletter. - - -
      </div>
    </div>
  <BR>
<BR>

</body>
</html>

--ef656ce8f95cabc4bbdf3560941b2641--

--808a830527d9009fd1a88a192f97a68c
Content-ID: <e7e80eeec1c3a2eb368bceef988d5012@localhost>
Content-Type: image/jpeg; name="aaa.jpg"
Content-Disposition: related; filename="aaa.jpg"
Content-Transfer-Encoding: base64

/9j/4AAQSkZJRgABAQEASABIAAD/4QAWRXhpZgAATU0AKgAAAAgAAAAAAAD/2wBDAAEBAQEBAQEB
AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/
2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB
AQEBAQEBAQEBAQH/wAARCABkAhIDASIAAhEBAxEB/8QAHQABAQADAAMBAQAAAAAAAAAAAAUCAwQG
CQoHCP/EADEQAQAABAMHBAIBAwUAAAAAAAABAwQFAgaBBzEyQXGxwQgRQvAJIRJER1FheJGh0f/E
ABoBAQEBAQEBAQAAAAAAAAAAAAAFAgMBBgj/xAAxEQABAgELAwMDBQEAAAAAAAAAAQIDERITMVFT
cZGS0eEEIbEFMsEUQYEiI0JS8GH/2gAMAwEAAhEDEQA/APkQkR3+/wC9+/3/ANPb/jkryOevj79i
jyOevh7mdlv43/SvnjZts+ztmH8nfp+yFmDOOR8qZpvuRLzT7OcV4yTeMw2G33a55Su2Kt9QFnrc
Vzy3W1c+zV8auz2mqjVUc2NRbKGb/OllfufpILHKkkNi9q1RtciSVphbaXes9R6P02Gx/VK9qRHq
1qw4EWMqqk2WVIMOIra61REWqVD1HyOGMPf3hCMO37+8297q5f4vPSDhhGEPyx+m2Pv7f02zD/H+
5GO96itpeV7PkfaPtAyXl/Nltz7YMn52zXleyZ6s0KXDZ86WfL99r7Tbc2WqFFcrzRYbbmOipJF4
oYUl4utLClrJUKe5V0r+FVNtMgwkaiUUKVE7/oYvhDzoPV/T/Unvh9I6I90Ns9yROmjwUkdIiKix
obEVauzVVbau3hIDdDCuoehuxTmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmt
sTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoeh
uwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDC
uoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLg
AFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmt
sTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoehuwmtsTLgAFDCuoeh
uwmtsTLgAFDCuoehuwmtsTLgMJnBi6M2EzgxdHiwoUi/tQ6l/g3YSJYmSE6bwx17RSp8eL2/XT9f
H/399f2qzeCOvaKTP3YvvKKN1MKGiJJDZV/VtqSfbtUZciTV7Jklpw7wEuYz+rdKbHGa3+rck/32
TI6JHPXw+pv095V2i1GwXYlU0P4UfT9tUoZ+yLZvOo9qN52q+le3XjaVSzMm2XHT59u1vzBkCszB
QXPOMnFgzFX0d8rKq8UtVcZsi51M+uwTpuP5ZJHPXw/pnL/qz9VGXLPasu5e9S/qAsWX7BbaGy2K
xWfbLtGtlns1ntVLJobZabVbKLMkiit1st1FIkUdDQUcmTS0lLJlU9PKlypeDBCt0LkaveWpJERE
+yJb/wA7diP616XH9TgwWQPp0WFEVyrHf1bEkWb7fpY8B0qSfyVyWJLX9MmHJ+03n+Br024d394P
SDHts45PmM2+yaqn267aqeuyFbdldbI2tbR5NZsws1ZZ7jZ9nFVKzjecFRkK1XDL9NR2CutuUJuH
Hl6hrLHR0lnqqW3Sp9tppFFjkSsHmEn1k+r3FCMY+qr1Ix9vaH7257T48v3vzR/1yfg95vN3zHeL
rmHMN1uV9v8AfblXXm+Xy811VdLxebxc6mbW3O63W5Vs2fW3G5XGtnz6yurqydOqquqnTaiomzJ0
zHjxWmKitRUSSXv/AJEREl4OPoPovU+lxYz4/wBLJEhtalA/rXLKk1e/1XUx2ydlT9LUW1VJoDR9
OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABhM4MXRmwm
cGLo8dUuC+ATpvBHXtFJn7sX34xVpvBHXtFJn7sX34xReqqTD5Qy/wBq/jyhwgJRxOiRz18LEjnr
4R5HPXwsSOevhR6StMF8IdWVLj8IUZG7F1h2b2iRuxdYdm9ch+xuBsANgAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCZwYujNhM4MXR46pcF8AnTeCOvaKT
P3YvvxirTeCOvaKTP3Yvvxii9VUmHyhl/tX8eUOEBKOJ0SOevhYkc9fCPI56+FiRz18KPSVpgvhD
qypcfhCjI3YusOze0SN2LrDs3rkP2NwNgBsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAYTODF0ZsJnBi6PHVLgvgE6bwR17RSZ+7F9+MVabwR17RSZ+7F9+
MUXqqkw+UMv9q/jyhwgJRxOiRz18LEjnr4R5HPXwsSOevhR6StMF8IdWVLj8IUZG7F1h2b2iRuxd
Ydm9ch+xuBsANgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAADCZwYujNhM4MXR46pcF8AnTeCOvaKTP3YvvxirTeCOvaKTP3Yvvxii9VUmHyhl/tX8eUOEBKO
J0SOevhYkc9fCPI56+FiRz18KPSVpgvhDqypcfhCjI3YusOze0SN2LrDs3rkP2NwNgBsAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYTODF0ZsJnBi6PHVLg
vgE6bwR17RSZ+7F9+MVabwR17RSZ+7F9+MUXqqkw+UMv9q/jyhwgJRxOiRz18LEjnr4BR6StMF8I
dWVLj8IUZG7F1h2bwXIfsbgbADYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAwmcGLoDx1S4L4BOm8Ede0UmfuxffjEEXqqkw+UMv9q/jyhwgJRxP//Z

--808a830527d9009fd1a88a192f97a68c--

As you see the background image is in the mail, but I can see it, the code of that image is just like the second one because there are the same image, they are just in different path, and the first is as CCS background and the second as an image, May be all of this can help you to localize my issue.

Note that data URI scheme is not supported by some applications, what are you using? Please send me a test message to my address.

I send you the message, with the newletter. Anwser me if you can, please.

What application are you using? I think the problem is that encoded data must not contain newlines, but your application insert newlines. Using this patch I can send a message whit your image "attached" to it. Please try with different applications, I am using Thunderbird. I am sending you a test message which is correct on my PC.

I use Mozilla Thunderbid version 2.0.0.17 (20080914). And don`t support (at least this version) that encode. But my main problem is gmail, yahoo and another web messengers, they don`t understand the encode, and i need users that are going to use theses email clients.
I have made my mail, without background images, i just put the images (there are just a couple) in tables cells, then put the text that have to be over the image inside another HTML labels and gave they a negative margin attributes, example

<td align="left" class="headerBlt"><img width="600" height="150" alt="Header" src="images/header1.jpg" /><h6>Ver en l&iacute;nea | Cancelar subscripci&oacute;n | Enviar a un amigo</h6>
</td>

And the css

td.headerBlt h6{
	margin-top: -15px;
	margin-left:20px;
	padding: 0;
}

Every seems to be OK in Mozilla Firefox, Iexplore 7 and 8, even in my Mozilla Thunderbid email client, but Gmail and yahoo not apply the property margin-top: -15px; and put the text after the image.
That why I need the module encode background images, just for the webmails.

Its any way to encode the background images just like the embedded images??
Excuse my English please

GMail does not support background-image, margin and a lot of other CSS properties at all. See the e-mail standards project for more information. This will work only if the application supports the background-image property and data URI schemes. Maybe you can find some workaround to create a layout which will work in one application, but in another it will be a nightmare. There is no e-mail application independent final solution.

I guess the world is just not ready for this feature yet.

I think a small line to explain the limitation and a link to http://www.email-standards.org/ on the front page of this project will help.

Added a note about this to the project page.