Relative size overlays
Relative size overlays
Presentation
Layers
Intermediate

Resize overlays to a given percentage of the main image, either related to width, height or both by setting the flags parameter to relative (fl_relative in URLs) while also setting the width and/or height parameters to the percentage value you need, represented by a decimal value (e.g., 0.4 for 40%).

Let's say we want to overlay the following black bar: Overlay image

https://res.cloudinary.com/demo/image/upload/black_bar.png
on top of the following image: Main image
https://res.cloudinary.com/demo/image/upload/lupine.jpg

The overlay image can be resized by specifying its dimensions with an absolute value in pixels. For example, 500px width and 200px height: Absolute value

https://res.cloudinary.com/demo/image/upload/l_black_bar,h_200,w_500/lupine.jpg

However, there are cases where you might not know the exact dimensions of the main image, therefore using fixed dimensions won't always deliver the exact result you expect. You can tell Cloudinary to overlay the image while resizing it to a relative percentage of the containing image by using the relative flag alongside the dimensions you wish. For example, here's how to place the overlay black bar to fit 100% of the main image's width and 10% of the image's height: 100% width-related

https://res.cloudinary.com/demo/image/upload/l_black_bar,w_1.0,h_0.1,fl_relative/lupine.jpg

This feature can also be applied to an image that is used as a background for text. The following example demonstrates the same dimensioned black bar, while lowering its opacity to 60% and adding text on top of it: Including text

https://res.cloudinary.com/demo/image/upload/l_black_bar,w_1.0,h_0.1,fl_relative,o_60/l_text:Arial_150_bold:Cloudinary,co_white/lupine.jpg