In our previous articles we have discussed about image overlays and text overlays.

You can also add colored backgrounds (or rectangles) as overlays to your images and change their position, dimensions and colors. This is particularly useful to create banners for your website or app. Let's take a look.


Basic background overlay
You can add a background overlay using the 'obg' transformation parameter. It takes a six-character hex code that specifies the color of the rectangle that will be overlaid.

Here is a green colored rectangle overlaid on the base image. The default height and width values are 100px.

https://ik.imagekit.io/demo/img/tr:obg-264120/plant.jpeg

Positioning the background overlay

Positioning works in the same way as images - using relative position like top_left using the 'ofo' parameter or using absolute x and coordinates using the 'ox' and 'oy' parameters. This positioning has been explained here.

Let's position this overlay background at the top of the base image using the relative position 'ofo' parameter.

https://ik.imagekit.io/demo/img/tr:obg-264120,ofo-top/plant.jpeg

Dimensions of the overlay background

The dimensions of the overlay background can be specified in the URL using the 'oh' and 'ow' transformation parameters for height and width respectively.

Here we have specified the overlay background to have a height of 50px and to be as wide as the base image i.e. 640px (you need to know the width value here).

https://ik.imagekit.io/demo/img/tr:obg-264120,ofo-top,oh-60,ow-640/plant.jpeg

Adding text overlay with background

To complete the banner, let's add a text overlay on this background. The text overlay needs to be specified in a separate transformation step than the background overlay. This is necessary so that the text overlay parameters can remain separate from the parameters of background overlay. Also, overlays specified in different steps of the chained transformation are stacked on top of each other - the one that comes last, comes on the topmost layer.

We have used a lot of overlay text transform-specific parameters which can be found here in the documentation of text overlays.

https://ik.imagekit.io/demo/img/tr:obg-264120,ofo-top,oh-60,ow-640:ot-50%25%20discount%20on%20all%20plants,otc-FFFFFF,ots-30,ott-bold,ox-140,oy-10/plant.jpeg

Opacity of overlay backgrounds

The opacity of the overlay background can be changed using the 'oa' transformation parameter. The value can be varied from 1 (0.1 or 10% opacity) to 9 (0.9 or 90% opacity). 

Here is an example of reducing opacity of the overlay background to 50% and creating a banner out of it.

https://ik.imagekit.io/demo/img/tr:obg-264120,oh-60,ow-640,oa-5:ot-50%25%20discount%20on%20all%20plants,otc-FFFFFF,ots-30,ott-bold,ox-140,oy-415/plant.jpeg

If you have any questions or feature suggestions related to overlay backgrounds, then send us an email at customer-support@imagekit.io.

Did this answer your question?