Skip to main content
Solved

Is there a recommended background image size?


Forum|alt.badge.img+2

I’m playing around with background images but it keeps dividing the background up into tiles and I have no idea what size to start with to avoid that. I want the background to cover the entire length of the email and not keep breaking in between. And suggestions?

Thank you!

Best answer by David To

Hello @cynthiajamin,

Since recipients of your emails will view these emails on a variety of devices, the resolution would differ from recipient to recipient, device to device. As such, there would not be a perfect recommended size for a background image that would span the entire length of your email. 
The industry standard width for emails is 600px. Using larger images such as ones greater than 1920x1080 would ease the background breaking up for devices having a smaller resolution but would still break when being viewed on a device that has a larger resolution. It's also important to keep in mind that using a larger image would impact loading times as detailed in the How to Use Images in Emails article.

Some suggestions we recommend would be to use a solid colored background as opposed to an image or by using an image that has a pattern to allow it to repeat. You can learn more about using background images within your emails from the How to Add a Background Image to an Email Template article.

Thanks for being a part of the Klaviyo Community!

-David

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

3 replies

David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2456 replies
  • Answer
  • May 17, 2021

Hello @cynthiajamin,

Since recipients of your emails will view these emails on a variety of devices, the resolution would differ from recipient to recipient, device to device. As such, there would not be a perfect recommended size for a background image that would span the entire length of your email. 
The industry standard width for emails is 600px. Using larger images such as ones greater than 1920x1080 would ease the background breaking up for devices having a smaller resolution but would still break when being viewed on a device that has a larger resolution. It's also important to keep in mind that using a larger image would impact loading times as detailed in the How to Use Images in Emails article.

Some suggestions we recommend would be to use a solid colored background as opposed to an image or by using an image that has a pattern to allow it to repeat. You can learn more about using background images within your emails from the How to Add a Background Image to an Email Template article.

Thanks for being a part of the Klaviyo Community!

-David

 


Forum|alt.badge.img+1

I am faced a trouble that, while converting to HTML from Klaviyo upon finishing my design with the new editor version, the image block is not showing in full view in browser.

The following screenshot is provided which is self-explanatory for reference.

 

Kindly suggest to me, how can I solve the problem.


alex.hong
Forum|alt.badge.img+58
  • Klaviyo Alum
  • 1552 replies
  • November 18, 2022

Hi @mahmudularif123 ,

  1. Do you mind heading into the Styles tab (not Block Styles) and selecting the box next to "Auto-restrict blocks to fit the width above"? From there you'll want to be sure to hit Save and refresh the page (this is required for this setting to be applied properly). 
    ?name=Screen+Shot+2022-06-29+at+9.25.53+PM.png
     
  2. The above should resolve a large portion of the space, but another thing to check for is the padding added into the Block Styles tab of each Image Block you're seeing this occur with. For example, this block here as a 9px padding added to the left & right sides that can be changed to 0 if you'd like it span the full width - 
    ?name=Screen+Shot+2022-06-29+at+9.28.00+PM.png

If these don’t work please share your HTML that you are transferring over in the screenshot within our template editor.