Background Image gets stretched depending on table content

I'm using kent and I'm customising templates with the full background image.
However, when I change the content of the table by adding rows containing images, this has the effect to stretch the background.

Here you can see an example of a non stretched background:


and here one of a stretched background:


Maybe I'm doing something obvious wrong.
Can you please help me?

Thanx


Comments

  • Hi sickrandir,

    As Email Designers we should use background-size:cover; css property in email templates to auto resize background image according to different screen resolutions otherwise image will distort.

    background-size:cover -> Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.

    The first email template height is 697px - Background image size is 1041px -> OK
    The second email template height is 1437px - Background image size is 1041px -> NOT OK

    ( You can check email template height using Chrome web developer tools ! ) Check following video...



    So resize the Background image's height at least 1437px 

    I resized your Background image for you  please download image -> https://www.dropbox.com/s/ks1ujhli5l6nxcj/bg.jpg?dl=0

    Best Regards,
This discussion has been closed.