Outlook not rendering background-image css property

Question

When a user creates an account on my application they receive an email with the credentials.

This email contains two images, one with the logo and the other as a background image.

The logo one does render in outlook and there are no problems with it, it is programmed as follows:

<img align="center" alt="" src="https://gallery.mailchimp.com/......">

The background image is the opposite, it does not render in outlook and it is programmed as follows:

background-image:url("https://gallery.mailchimp.com/......");

Is there a solution for replacing the css property background-image by the <img> html tag and still keep the image in the background?

UPDATE 1

The HTML where the background image is:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" id="templateHeader" data-template-container>

The css for the id = "templateHeader" :

#templateHeader{
            background-color:#F7F7F7;
            background-image:url("https://gallery.mailchimp.com/......");
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:45px;
            padding-bottom:45px;
        }

Answer 1

A possible resolution for your problem is: wrap your <table> in a <div> and then in <td align="center" valign="top" id="templateHeader" data-template-container> , instead of the background-image image is on a separate CSS file, do it directly, using background:url() :

<td style="background:url("https://gallery.mailchimp.com/......"); top center /cover repeat;" align="center" valign="top" id="templateHeader" data-template-container>

If you want test it with a CSS file too: ( tested and working )

#templateHeader{
            background: url("https://gallery.mailchimp.com/......");
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:45px;
            padding-bottom:45px;
        }

Answer 2

You can use this code

  body { margin: 0; padding: 0; } #templateHeader{ background-color:#F7F7F7; background-image:url("https://d1cr57qij2cwzh.cloudfront.net/wp-content/uploads/2017/11/EOA_OutlookImageSupport_Blog-1200x675.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:250px; padding-bottom:250px; } 

  <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" valign="top" id="templateHeader" data-template-container></td> </tr> </table>