Text overlay background styling?

Nicole Poull

March 13, 2017 20:09

I have a design I am working with that involves overlaying text (which was input by a user) over a gif image. This seems straight forward from what I have seen in your documentation, but I have hit a potential snag: the design calls for some of the text to be overlaid on a solid colored background.

Here is an example of this effect: http://imgur.com/a/vRMrY. You can see that last 3 lines of the text are white with a black background. This mimics the concept of having text on a website with a CSS background color applied to it. We are going for this effect for readability purposes, as the gif image below the text will have variable content.

Is this possible with the API? I can't seem to find any references to defining a background color for a text overlay transformation.

2

• 

  Maor Gariv

  March 14, 2017 10:20

  Hi,

   

  Thank you for contacting us.

  Yes, it is indeed possible:)

  You can choose the color of the background and text.

  For example, here is an image with a text overlay with no background (default text color is black) -
  http://res.cloudinary.com/maor/image/upload/l_text:Arial_30:myText/v1469031598/sample.png

  Adding the background parameter (b_ in URLs) and setting the text color to white ( co_ in the URLs) -
  http://res.cloudinary.com/maor/image/upload/b_blue,co_white,l_text:Arial_30:myText/v1469031598/sample.png

  For more information on text overlay,
  http://cloudinary.com/documentation/image_transformations#adding_text_captions

  Thanks,
  Maor

  0
• 

  Emmanuel Cousin

  July 06, 2018 11:44

  Hi,

  I'm trying to add a background color to my text overlay so that it looks like this: 

  

  It's working fine when I use text captions, but I need to obtain the same result when I instead apply an overlay using a SRT file.

  Unfortunately the `background` parameter is used for the border of the text this time, and it looks like this : 
  
  
  How can I make it like the first image ?
  
  Thanks,
  
  Emmanuel
  
  

  0
• 

  Daniel Mendoza

  July 09, 2018 23:10

  @Emmanuel

  Can you share with us a Cloudinary URL example?

  If you wish to keep this private, please open a support ticket @ https://support.cloudinary.com/hc/en-us/requests/new.

  0
• 

  Emmanuel Cousin

  July 16, 2018 14:37

  Hello @Daniel,

  Here is the example for the first case, using text overlays: http://res.cloudinary.com/emmanuelcousin/video/upload/c_scale,g_south,l_text:Lato_40:Ceci%20est%20un%20test,co_white,b_rgb:6772E5,c_fit,w_1073,y_60/v1530807000/ipsa.mp4

  Here is the example for the second case, using subtitles overlays:

  https://res.cloudinary.com/emmanuelcousin/video/upload/fl_relative,g_north_east,l_checksub_logo_white,w_0.8/b_rgb:6772E5,c_fit,co_white,g_south,l_subtitles:Lato_14:CheckSub_FR_subtitles_test-coucou.vtt,w_680,y_60/v1530785256/test-base64.mov

  As you can see, both are using the attribute b_rgb:6772E5, but the rendering is different.

  0
• 

  Daniel Mendoza

  July 19, 2018 16:25

  @Emmanuel Cousin

  Thank you for reporting this. I have reported this to our dev team, as it appears a background cannot be added. 

  Once I receive an update from them, I will update this post.

  0
• 

  Daniel Mendoza

  December 04, 2018 21:29

  @Emmanuel Cousin

  We have resolved the issue and the background should behave just like the text overlay. Here is an example:

  https://res.cloudinary.com/demo/video/upload/w_500/l_subtitles:sample_sub_en.srt,co_black,b_yellow/dog.mp4

  Please give it a try.

  Also, if you want to update already uploaded videos, you'll need to either (1) delete the derived video and invalidate the URL by passing the parameter invalidate set as true or (2) explicitly update the resource with that particular transformation with the parameter invalidate set as true.

  https://cloudinary.com/documentation/image_upload_api_reference#explicit_method

  Hope this help.

   

  0
• 

  Emmanuel Cousin

  December 04, 2018 21:42

  @Daniel Mendoza

  It works indeed. Thank you!

  0
• 

  Raymond Camden

  December 05, 2022 16:46

  Hi, forgive me for responding a super old thread, but is there a way to also add padding? For example:

  https://res.cloudinary.com/maor/image/upload/b_blue,co_white,l_text:Arial_30:myText/v1469031598/sample.png

  Notice how the blue background is very 'tight' around the text?

  0
• 

  John Roco

  December 06, 2022 05:39

  Hi Raymond,

  You can add a border around the text to give it more padding.

  Please see the example below. You can set the color of the border the same as the text background, I just chose green to make the distinction visible.

  https://res.cloudinary.com/demo/image/upload/b_blue,co_white,l_text:Arial_30:myText/fl_layer_apply,bo_40px_solid_green/sample

  1
• 

  Raymond Camden

  December 06, 2022 14:01

  Perfect, thank you!

  0
• 

  Ciprian Borcescu

  February 06, 2023 09:59

  Hello,

  Is there any way that a content-aware background can be added to a text overlay? 

  I have looked through the documentation and I have found this option for "Content-aware padding". 

  Are these options available for text overlays as well? I have tried to use:

  • b_auto:predominant,c_pad,h_300,w_300
  • b_auto:palette_red_green_blue

  These don't seem to work on a text overlay or maybe I am using it in the wrong way. 

  This is the URL with the text overlay for which I am trying to add a "content-aware background":

  https://res.cloudinary.com/adhub/image/upload/co_rgb:FFFFFF,l_text:verdana_60_bold_left:NY%20PRIS/fl_layer_apply,c_scale,fl_region_relative,w_0.23,fl_no_overflow,g_north,y_0.30,x_0.00/cld-sample.jpg

  I tried adding it like this with no success:

  https://res.cloudinary.com/adhub/image/upload/b_auto:predominant,c_pad,h_300,w_300,co_rgb:FFFFFF,l_text:verdana_60_bold_left:NY%20PRIS/fl_layer_apply,c_scale,fl_region_relative,w_0.23,fl_no_overflow,g_north,y_0.30,x_0.00/cld-sample.jpg

  Any help is greatly appreciated. 

   

  0
• 

  Jackie Catania

  February 06, 2023 14:00

  Hi Ciprian, 

  Thanks for contacting Cloudinary Support. Unfortunately, there isn't a way to add content-aware background on a text overlay. I suggest using the hex background to achieve what you need. 

  Please let me know if you have any questions as I am happy to help. 

  Thanks, 

  Jackie 

   

   

  0

Post is closed for comments.