Solved

Is there a recommended background image size?

  • 16 May 2021
  • 3 replies
  • 1888 views

Badge +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!

icon

Best answer by David To 17 May 2021, 15:53

View original

3 replies

Userlevel 7
Badge +60

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

 

Badge

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.

Userlevel 7
Badge +58

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.

Reply