0

I am trying to send an HTML email with a certificate.

  1. Since its a certificate I need the logo as a watermark image (PNG) to be the background of the HTML
  2. The watermark has to be the center of that email.
  3. The watermark PNG should not stretch

The problem is the image is not coming to the center. Also, if I remove the Div width and height the watermark disappears.

Here is my HTML

<div id="watermark">
            <img src="https://js.pngtree.com/web3/images/home/web_heart_animation.png" height="110%" width="100%" />
        </div>

Here is my CSS

        body{
        font-family: 'Arial';
    }
    #watermark {
                position: fixed;

                /** 
                    Set a position in the page for your image
                    This should center it vertically
                **/
                bottom:   3cm;
                left:     -1cm;

                /** Change image dimensions**/
                width:    22cm;
                height:   22cm;

                /** Your watermark should be behind every content**/
                z-index:  -1000;
            }
@media print {
  #footer {
    position: fixed;
    bottom: 0;
  }
}
user580950
  • 3,558
  • 12
  • 49
  • 94

1 Answers1

0

1.HTML emails are different than normal HTML Code, because most of email engines don't support CSS Stylesheet or CSS in the Header. You need to write inline CSS.

  1. You have to use HTML tables to make it consistent and look good in Outlook, Gmail ..etc

  2. Here is a work around solution for Background images in HTML email Templates: How make background image on newsletter in outlook?

Muhammad Al Mousa
  • 36
  • 4
  • I am using inline CSS with Style tags. My problem is more of how to center align the watermark in HTML – user580950 Dec 02 '20 at 22:11
  • the code what you posted is not inline css. Could you please post the actual code with a screenshot or any visual explanation of what you want. I am kind of specialized in HTML newsletters. – Muhammad Al Mousa Dec 02 '20 at 22:17