Text overlay positioning
Text overlay positioning
Presentation
Layers
Beginner

Customize text overlay's position by setting the gravity (g in URLs) and the optional offset of the x and y. While the default text positioning ('gravity') is center, you can place your text in any other area of the image (tip: even outside the image's boundaries).

Here's an example of the default center positioning: Default - center

https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Hello World/face_center.jpg

Use the gravity parameter (g in URLs) to place your text in different areas of the image, for example - south:

South gravity

https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Hello World,g_south/face_center.jpg

In addition, you can add the x and y parameters for even more accurate positioning. Here's an example of changing the text's location to the north-west corner, with a 20 pixels offset (for both 'x' and 'y'):
Custom position

https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20/face_center.jpg

The text overlay can be embedded outside of the image's boundaries. This can be used, for example, for a caption text: Caption text

https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Hello World,g_south,y_-40/face_center.jpg

You can have more advanced features, like positioning the image on the automatically detected face, rotating it, and fitting the text's size to 50% (0.5) of the detected face by setting flags to region_relative (fl_region_relative in URLs) and the required percentage: Text relative to detected face

https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Hello World,g_face,a_19,fl_region_relative,w_0.5/face_center.jpg

You can also set the text's dimensions to be relative to the whole image setting flags to region (fl_region in URLs) and the required percentage. For example, resize the image to be 50% in width and 20% in height relative to the base image:

Text relative to image

https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Hello World,fl_relative,w_0.5,h_0.2/face_center.jpg

See this blog post for more information: Adding watermarks, credits, badges and text overlays to images