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.