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 in any email client
Expected output

score 1 · Answer 1 · answered Jun 02 '15 at 09:40

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.

score 1 · Answer 2 · answered Jun 02 '15 at 10:22

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/abott@adorable.io.png" class="thumbnail" alt="user photo">
  </header>
</div>

Positioning an image above another image in an email template

2 Answers2