Text overlay background styling?
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.
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) -
Adding the background parameter (
b_in URLs) and setting the text color to white (
co_in the URLs) -
For more information on text overlay,
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 ?
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.
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:
As you can see, both are using the attribute b_rgb:6772E5, but the rendering is different.
We have resolved the issue and the background should behave just like the text overlay. Here is an example:
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.
Hope this help.
Hi, forgive me for responding a super old thread, but is there a way to also add padding? For example:
Notice how the blue background is very 'tight' around the text?
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.
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:
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":
I tried adding it like this with no success:
Any help is greatly appreciated.
Post is closed for comments.