Positioning an image over another image in an email template
How to place an element in any email template. In design I have to place an image on top of another, which can only be possible by positioning it absolute or giving it a margin. As far as I know, Google does not support margining and style positioning for any element. Is there any other way to solve this problem.
It currently looks something like this.
Expected Result
source to share
Most used email clients do not support the position
css property . Link .
I can offer you two options.
-
Place a larger image as the background of the parent element and place another image in the child tag
<img>
. And play with propertieswidth
,height
bothfloat
parent and child.<div style="background: url(...);"> <img src="..."/> </div>
- Or, if these images are going to be the same for all emails, then create a composite image combining the two.
source to share
For the cover use background-image
and for user photo use img
, then put the img on the inner cover and give it a top offset with an extra one 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>
source to share