Hi everyone,

Im trying to create an email template fotr use in MC. It looks great and works in all email clients, excpet for Outlook 2013+ :-(. I think the issue stems from the use of v:rect to add a background image. Within that v:rect I have another table, which Im trying to rioght aloign and add background with 90% opacity.

I have tried using HTML to align the table, CSS but it always sits to the left. Also the opacity doesnt work using rgba(0,0,0,0.9) or using a background image 1px that has the background colour already appiled ot the image.

Outlook is doing my head in! Looking for some tips please! Thanks in advance.


<!-- Hero 1 Module ***** -->
      <table mc:repeatable="module" mc:variant="hero1" width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" style="position:relative;">
        <tr>
          <td align="center" bgcolor="#eef3f6" style="background-image:url(https://gallery.mailchimp.com/ea3adef16ec5cc5e0e8f88bc6/images/e2bcee0e-e87a-47d9-8327-d6d9a0426c91.jpg);-webkit-background-size:cover;background-size:cover;background-position:center;background-repeat:no-repeat;">

            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:988;">
            <v:fill type="frame" src="https://gallery.mailchimp.com/ea3adef16ec5cc5e0e8f88bc6/images/e2bcee0e-e87a-47d9-8327-d6d9a0426c91.jpg" />
              <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                <![endif]-->
            <div>
              <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
                <tr>
                  <td align="right">
                    <table width="50%" border="0" cellpadding="0" cellspacing="0" align="right" class="full" style="float: right; background-image: url(https://gallery.mailchimp.com/ea3adef16ec5cc5e0e8f88bc6/images/bf0c2fe8-b86c-4668-8ae5-f74c839c94d9.png); background-repeat:repeat;" id="">
                      <tr>
                        <td width="100%" align="center">
                          <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
                            <tr>
                              <td width="100%" height="65"></td>
                            </tr>
                          </table>
                          <table width="298" border="0" cellpadding="0" cellspacing="0" align="left" class="mobile" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                            <tr>
                              <td width="100%" align="center" class="pad20">
                                <table width="250" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;text-align:center;" class="centered">
                                  <tr>
                                    <td height="50" width="100%" style="font-size:1px;line-height:1px;"> </td>
                                  </tr>

                                  <tr>
                                    <td height="15" width="100%" style="font-size:1px;line-height:1px;"> </td>
                                  </tr>
                                  <tr>
                                    <td align="left" style="color:#ffffff;font-family:'Open Sans', sans-serif;font-weight:700;vertical-align:bottom;font-size:35px;line-height:40px;" class="centered" mc:edit="hero1 maintitle">
                                      <!-- Change Main Title -->
                                      Limited Time Offer
                                      <p style="font-size:25px;">xxxxxxx </p>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td height="35" width="100%" style="font-size:1px;line-height:1px;"> </td>
                                  </tr>
                                  <tr>
                                    <td align="left" width="100%" style="font-family:'Open Sans', Helvetica, Arial, sans-serif;font-size:13px;color:#ffffff;font-weight:400;line-height:22px;" class="centered" mc:edit="hero1 content">
                                      <!-- Change Content -->
                                      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                    </td>
                                  </tr>
                                  <tr>
                                    <td height="25" width="100%" style="font-size:1px;line-height:1px;"> </td>
                                  </tr>
                                  <tr>
                                    <td width="100%">
                                      <table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="full">
                                        <tr>
                                          <td width="60%" style="font-family:'Open Sans', Helvetica, Arial, sans-serif;font-size:14px;color:#0374b0;font-weight:700;line-height:24px;" mc:edit="hero1 timeleft">
                                            Time Left To Buy
                                          </td>
                                          <td width="20%" style="font-family:'Open Sans', Helvetica, Arial, sans-serif;font-size:14px;color:#0374b0;font-weight:700;line-height:24px;" mc:edit="hero1 days">
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="100%" height="5" style="font-size:1px;line-height:1px;"> </td>
                                  </tr>
                                  <tr>
                                    <td width="100%" class="fullCenter" style="text-align:center;">
                                      <table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="full">
                                        <tr>
                                          <!-- Change Percentage and Color of Bar Chart -->
                                          <td width="60%" height="5" bgcolor="#0374b0" style="border-top-left-radius:2px;border-bottom-left-radius:2px;"></td>

                                          <!-- Change Background of Bar Chart  -->
                                          <td width="40%" height="5" bgcolor="#ffffff" style="border-top-right-radius:2px;border-bottom-right-radius:2px;"></td>

                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td height="35" width="100%" style="font-size:1px;line-height:1px;"> </td>
                                  </tr>
                                  <tr>
                                    <td valign="top" width="100%" align="left" class="centered">
                                      <table border="0" cellpadding="0" cellspacing="0" align="left" class="btn">
                                        <tr>
                                          <td align="center" height="45" bgcolor="#0374b0" style="border-radius:5px;padding-left:30px;padding-right:30px;padding-bottom:3px;font-weight:700;font-family:'Open Sans', Helvetica, Arial, sans-serif;color:#ffffff;font-size:14px;" class="hover" mc:edit="hero1 button">
                                            <!-- Change to your custom URL -->
                                            <a href="#" style="color:#ffffff;text-decoration:none;">
                                              <!-- Change Button Text -->
                                              Claim Your Discount
                                            </a>
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td height="50" width="100%" style="font-size:1px;line-height:1px;"> </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </div>
            <!--[if gte mso 9.]>
          </v:textbox>
        </v:fill>
      </v:rect>
      <![endif]-->
          </td>
        </tr>
      </table>
      <!-- End of Hero 1 Module -->

Regards,

Leigh