I am trying to send emails by gmail with nodemailer, but the problem is that the company I am in opens them from outlook and from windows 10 mail, the problem is that I have to embed images such as the logo and a background. It works well attaching the images, but I don't want them to look like images to download when I open the email.
Try various options like converting the image to base64 or using the image as a link, but the latter only works as follows:
<img data-imagetype="External" src="https://imgur.com/nTjrntx.png"/>
As you can see when I put the data-imagetype =" External " it works, the problem is that I want to put a background image, for this I use the property of background: url ()
Is there a way to put the data-imagetype inside the background: url ()?
Since if I put this html code it doesn't work:
<main style="position: relative;display:flex;flex-direction:column;">
<section style="z-index: 1;">
<img data-imagetype="External" src="https://imgur.com/JzrkOXb.png" />
</section>
<section style="position: absolute; z-index: 2;left:20%;right:20%;margin-top:10%">
Hello People
</section>
</main>
I understand that it does not work due to the incompatibility of CSS styles that mail clients can process
So this is the code I have:
<!DOCTYPE html>
<html >
<body>
<main style="padding-left:40px;padding-right:40px;border:0.5px solid #e5e5e5;margin-top:20px;border-radius:2px;background-image:url('https://imgur.com/JzrkOXb.png');background-repeat: no-repeat;background-position:center;background-size: 100% 100%;background-color:#2AEDC2;">
<p style="font-size:20px;text-align:center;color:black"><strong>Hello People</strong></p><br />
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam leo. Donec ut felis in arcu fermentum pulvinar.</p><br />
<p style="text-align:center;">!REGARDS!</p><br /><br /><br />
</main>
</body>
</html>
Achieve the impossible, I could place the background image and the text on top, like this:
<td valign="top" style="background-image:url(https://imgur.com/JzrkOXb.png);background-repeat: no-repeat;background-position:center;background-size: 100% 100%;>
<!--[if gte mso 9]>
<v:image data-imagetype="External" xmlns:v="urn:schemas-microsoft-com:vml"
fill="true" stroke="false" style=" border: 0;display: inline-block;
width:850px;height:350px;" src="https://imgur.com/JzrkOXb.png" />
<v:rect data-imagetype="External" xmlns:v="urn:schemas-microsoft-com:vml"
fill="true" stroke="false" style=" border: 0;display: inline-
block;position: absolute; width:700px;height:250px;margin-
left:80px;margin-top:50px;">
<v:fill opacity="0%" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="color:#808080">
<p style="font-size:20px;text-align:center;"><strong>Dear people.
</strong></p><br />
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut fringilla elit.</p><br />
<p style="text-align:center;">!REGARDS!</p><br /><br /><br />
<table width="100%" cellpadding="0px" cellspacing="0px"></table><br /><br /><br />
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
As you can see, I had to use the VML language, in which the key is that in this line v: image data-imagetype = "External" xmlns: v = "urn: schemas-microsoft-com: vml ... when placing the imagetype worked wonderfully in several mail clients, such as windows 10 mail, outlook, gmail and yahoo.
I leave you a bit of the VML documentation: https://docs.microsoft.com/en-us/windows/win32/vml/web-workshop---how-to-use-vml-on-web-pages-----image--element
Although the only detail is that apparently in web and mobile devices when wanting to change the color of the letter to black it changes to white and vice versa.
I am happy to have achieved it and I hope it will serve those who have the same problem as me :)