Solved

How to add an image behind a text block?

  • 10 December 2020
  • 4 replies
  • 107 views

Userlevel 2
Badge

Hello guys!

I’ve been trying to see how I can add a background image for a text block like below (I saw this sample from the holiday show).

 

Screenshot from The Holiday Show

 

I couldn’t find a way to do this so I was hoping someone can teach me? Is it via custom HTML?

Thank you!

icon

Best answer by cassy.lee 12 December 2020, 00:42

Hi @daphne, I’m so glad to hear that you were able to join us for the Klaviyo Holiday Show! I hope you found it fun and educational - love that you were able to pull some ideas from it, like the one above. 

You can actually add a full background in your template, then delete the Content Background in order to clear the text box color. Unfortunately, it’s not super straight-forward in the editor, but we have a guide on how to make the text background transparent in this article here.

Essentially, you clear out the Content Background, hit “Save”, then either Refresh the page or click Save & Return to Templates. When you get back to the page, the text background should be cleared out and transparent. 

You can see in my example that, where my text box is, the background is transparent, but I’ve highlighted my text: 

 

Hope that helps! 
-Cass.

View original

4 replies

Userlevel 1
Badge

This is definitely with html or 100% image

Userlevel 2
Badge

Thanks for confirming @jsappington.

I hope Klaviyo writes a tutorial for HTML :fingers_crossed_tone2:

Userlevel 5
Badge +5

Hi @daphne, I’m so glad to hear that you were able to join us for the Klaviyo Holiday Show! I hope you found it fun and educational - love that you were able to pull some ideas from it, like the one above. 

You can actually add a full background in your template, then delete the Content Background in order to clear the text box color. Unfortunately, it’s not super straight-forward in the editor, but we have a guide on how to make the text background transparent in this article here.

Essentially, you clear out the Content Background, hit “Save”, then either Refresh the page or click Save & Return to Templates. When you get back to the page, the text background should be cleared out and transparent. 

You can see in my example that, where my text box is, the background is transparent, but I’ve highlighted my text: 

 

Hope that helps! 
-Cass.

Userlevel 2
Badge

That is really helpful!!! Thank you Cass :)

Reply