Positioning an image above another image in an email template

Question

How can I position an element in any email template. In the design that I have to place an image over the other, which can be possible only with positioning it absolute or giving it a margin. As far as I know google doesn't support margin and positioning styling for any element. Is there any other way to solving this issue..

At present it looks something like this

Expected output

Answer 1

The most used email clients don't support position css property. Reference.

I can suggest two options to you.

• Put the bigger image as a background of the parent element and put another image in a child <img> tag. And play around with the width, height & float properties of parent and child elements.

  <div style="background: url(...);">
      <img src="..."/>
  </div>
  

• Or, if these images are going to be same for all the emails, then create a composite image combining these two.

Answer 2

For cover photo use background-image and for user photo use img, then place img inside cover photo and give it an upper offset with additional div above img.

working example http://codepen.io/anon/pen/oXZXmp

css

.container {
  background: red;
  margin: auto;
  width: 600px;
  height: 300px;
  background: #ddd;
}
header {
  padding: 20px;
  height: 140px;
  background: url(https://static.pexels.com/photos/489/dawn-nature-sunset-night.jpg) center top;
  background-size: cover;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #fff;
  border: none;
}
.offset {
  width: 100%;
  height: 100px;
}

html

<div class="container">
  <header>
    <div class="offset"></div>
    <img src="http://api.adorable.io/avatars/100/[email protected]" class="thumbnail" alt="user photo">
  </header>
</div>