Background image for email compatible with mobile clients
The problem with adding a background image today is setting the container to be the right size on a flexible layout. (The background
property is now supported almost everywhere.) Say we want to add an image that has a 16:9 ratio, and we want to container to keep this ratio on any device width.
Usually, this achieved via padding-top: 56%
, and setting a position:absolute
for the direct child element, to position it "normally", at the top of the block. The padding-top: n%
is a nice trick to set the aspect ratio of a block.
This unfortunately won't work for Gmail, as it doesn't support the position
rule. Yahoo has other issues as well.
The solution
Use padding-bottom: 56%
instead, and
.child {
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
overflow: visible;
}
for the child element. The convoluted height
rules are for Yahoo.