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:

on top of the following image:

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

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:

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: