Solved

Why isn't the full background image displaying in my block in my email template?

  • 23 January 2022
  • 3 replies
  • 592 views

Userlevel 2
Badge +6

So, apparently the new template editor allows you to add images as background with “content” on top.

So, someone explain to me why, when I add an image in the background via the Sections tab my image is cropped?

 

My original image shows much more than it shows below. If I add text, I know I can hit the space bar, and it will reveal more of the image, but I shouldn’t have to do this.

I’ve also noticed there is no videos showing people how to do this? And very little information anywhere actually.

 

  

icon

Best answer by retention 25 January 2022, 00:16

View original

3 replies

Userlevel 7
Badge +60

Hi @eCommetry

 

Thanks for sharing your question with the Community! 

 

You bring up a good point that I’d love to shed some more light on! You hit the nail on the head when you mentioned that the more text or space you add to the block, the more of the image will be displayed. This is because the block you’ve chosen is set to be a ‘background’ image to the block you’ve chosen. The image is not the main point of the block. It's not an "image with a text overlay" ie. a larger image with text on top. If it was, then you’re correct, something would be off here as the image is the main focus of the block and the entirety of the image has failed to display.

 

If you are looking to implement an image with a text overlay into the new template editor, I would suggest using a third party editing software to do so. Then, you would be able to import the full image, complete with text overlay, back to Klaviyo for use as an image as this is not a native feature of the template editor. 

 

Thanks for your participation in the Community! 

-Taylor 

Userlevel 7
Badge +57

@eCommetry - Just to chime in here - as someone who’s spent a great deal of time in Klaviyo Templates, the New Template Editor is still pretty new (Launched in October ‘01 Product Announcement) and I think most of us are still learning it’s nuances.  So rest assured, I trust both Klaviyo and the community will have more tips and tricks on it in due time.  I’m going to do a deep dive in it as I imagine most people are considering to leverage it in 2022 - there’s so many new possibilities.

But to address your question,, one way I have managed to “expand” the background image size is to add in top/bottom padding to the background image. 

  • First, click on the Section and toggle on the “Section Padding” setting in the Styles tab. 
  • Then, increase the Top/Bottom padding space to properly fit the full image.  You want to use a number that add enough “pixels” above and below the content within the Secti
  • Here’s what it might look like:

Additional note - just make sure you check both Mobile and Desktop preview.  You may consider creating a version of the Section that shows only on Desktop, and another Section for Mobile if your background image’s aspect ratio doesn’t look quite right for both.

Hope this helps!

Userlevel 2
Badge +6

Thanks @Taylor Tarpley and @retention retention for your replies.

 

@Taylor Tarpley I guess you’re right, it’s just that certain people deceived me on how it works. It’s manageable, but I thought there was a better way to do it. But at least you can do it now...that’s one way of looking at it. 

 

@retention Retention, this seems like a good idea, I didn’t think of it. Will give this a try!

Reply