-1

I've managed to place a PNG on top of another image in my responsive e-mailing, using MailChimp.

.bannerupdate{
            width:96px !important;
   height:96px !important;
            position:absolute;
      top: 0px;
      left: 0px
  }
        .containerdiv{
            position: relative;
        } 
} @media only screen and (max-width: 640px){
  body[yahoo] .bannerupdate{
   width:96px !important;
   height:96px !important;
            position:absolute;
      top: 0px;
      left: 0px;
  }
} @media only screen and (max-width: 640px){
  body[yahoo] .gallery-img{
   width:320px !important;
   height:auto !important;
        }
} @media only screen and (max-width: 640px){
  body[yahoo] .containerdiv{
   width:320px !important;
   height:auto !important;
}
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590" align="left" border="0" cellpadding="0" cellspacing="0">
        
        <tbody><tr>
         <td  align="center">
          <div class="containerdiv"><a href="" style=" border-style: none !important; border: 0 !important;" class="editable_img"><img class="gallery-img" editable="true" mc:edit="shopimg1" src="https://gallery.mailchimp.com/2571dbc33397f4ace3a6774a8/images/8b1dde61-8cf2-4480-8cc0-8547957be270.png" style="display: block; width: 202px;" alt="section image" border="0" width="202"><img class="bannerupdate" editable="true" mc:edit="banner1" src="https://gallery.mailchimp.com/2571dbc33397f4ace3a6774a8/images/6c49e243-afce-4ffa-a3d7-96a214e4a0b4.png"/></a>
                                                                                
                                        </div>
         </td>
        </tr>
       </tbody></table>

But despite the pictures being fine and responsive on MailChimp, Gmail and Hotmail does not seem to understand my coding. The banner appear underneath the picture, and centered. Not ON the picture. Is there any way to make them appear just as it is on MailChimp?

Thanks in advance.

Tangane
  • 1
  • 2

2 Answers2

1

Im not sure you can use position absolute in gmail, however, if what you are trying to do is to add a background in your email template, here is the best way to do so.

Mathieu Ho Thanh
  • 31
  • 3
0

I think you could do it like this

http://jsfiddle.net/h7yuLst5/

make a div

<div class="img"></div>

div {
    height: 200px;
    width: 200px;
    background: url("https://gallery.mailchimp.com/2571dbc33397f4ace3a6774a8/images/6c49e243-afce-4ffa-a3d7-96a214e4a0b4.png") no-repeat left top, url("https://gallery.mailchimp.com/2571dbc33397f4ace3a6774a8/images/8b1dde61-8cf2-4480-8cc0-8547957be270.png") no-repeat center center;
}

and set background to it. It's up to you to play with sizes and positioning to make it responsive.

Jesus Mendoza
  • 323
  • 2
  • 17
  • Unfortunately, this answer did not help me because my client needs this picture underneath to be dynamic, an algorithm is supposed to change the picture depending on the person who receives that e-mail. I don't think it would be that easy if it's written in the CSS part of the doc. On a brighter note, I managed to fix that problem by giving the size max of the 'container', so the banner can't go beyond the picture now. But Gmail and Hotmail are still giving me a hard time, I'll update the OP. Thank you. – Tangane Jan 26 '15 at 20:22
  • If you use the link @Mathieu Ho Thanh provided, you will have some nice code that will display backgrounds in Outlook 7, 10 and 13 using VML. If you want the background image to be responsive, use mobile queries such as background-repeat, background-position and background-size. This will allow you to vary the background image depending upon screen-size. – Pebbs Jan 30 '15 at 15:24
  • Oh, also Gmail will strip the header from the HTML it receives, which is why it's so important to do all you your styling in-line. The code provided by the link Mathieu mentioned above will definitely work in Gmail though. – Pebbs Jan 30 '15 at 15:28