Mailchimp background-size cover

Question

I tried to make a background image cover in many different ways but Mailchimp seems to delete that piece of code.

Any approach on how to make this work.

Cheers, Michael

Answer 1

Ah Mailchimp. Well, in custom templates the best thing to do is literally DO IT ALL. Meaning, add it to the table or TD with CSS AND the default table styling.

Also you have to take into account the Outlook users that your email will go to.

SO you have to add a few things.

Let's start with the html tag above the head . First off, the best doctype to use is XHTML 1.0 transitional. Now I know that you CAN do one with an empty html tag and NO DOCTYPE, but you aren't doing yourself any favors.

Change <html> to <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

This is going to say "You are using Microsoft. Okay, where are those rules?"

Next off, in the CSS you need to add this:

#outlook a{
        padding:0;
    }
    .ReadMsgBody{
        width:100%;
    }
    body{
        width:100% !important;
        min-width:100%;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
    }
    .ExternalClass{
        width:100%;
    }
    v*{
        behavior:url(#default#VML);
        display:inline-block;
    }

Pay attention to the ones like v* and #outlook a .

SO you have those, and now you can add in the stuff for the background. In EACH table or td that you want a background, you have to add it inline. BUT it is a good practice to ALSO use an xlmns wrapper. This doesn't have to be code, it can be commented out and will still be read as a backup.

<!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
  <v:fill type="tile" src="YOURIMAGEPATH.jpg" color="#000000"/>
  </v:background>
  <![endif]-->

<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#000000" background="YOURIMAGEPATH.jpg" style="background-image:url(YOURIMAGEPATH.jpg)">
     <tr>
         <td align="center">
            <!--YOUR CONTENT-->
         </td>
     </tr>
</table>

<!--[if gte mso 9]>
   </v:textbox>
   </v:rect>
<![endif]-->

Notice how the entire table is wrapped in that commented section? That says that basically if your recipient is using Outlook, it is going to go ahead and render the background.

Campaign Monitor made a really nifty too to do just this to table and td . Remember too that you can NOT use cover or skew the background at all. Just make it the 100% size your email will be.

<!--Hopefully not more than 600px-->

Backgrounds.cm by Campaign Monitor

Mailchimp background-size cover

Question

1 answers

solution1
2 2017-01-12 00:35:25

Mailchimp background-size cover

Question

1 answers

solution1 2 2017-01-12 00:35:25

solution1
2 2017-01-12 00:35:25