Background Transformation
The background transformation is useful when you want to set the background of a PNG image that has transparency or if you are using it with other transforms (like pad_resize crop mode, radius etc.) which introduce a transparency or a solid background in the output image.
The background transformation is represented by the keyword 'bg'. It currently accepts hex code values for the color that has to be used as the background. The hex code is represented in the format `RRGGBBAA` or `RRGGBB`. If you are using the 8-character representation for the background, then the last two characters (shown as 'AA') represent the opacity of the background color. The value 00 corresponds to complete transparency (opacity - 0.0) and the value 99 indicates opacity - 0.99 (nearly opaque). If you do not specify the opacity value, then the default opacity value in the 6-character hex code representation is 1 (completely opaque). Note that opacity in the background color doesn't work for specifying the background of a PNG image.
Syntax
bg-<hex_code_rrggbb>
or
bg-<hex_code_rrggbbaa>
Let's take a look at some example URLs and output images
1. Specifying a background for a PNG image
https://ik.imagekit.io/demo/img/logo-white_SJwqB4Nfe.png?tr=bg-F00000
2. Specifying a red background with opacity 0.3 (AA = 30), pad resize crop mode
https://ik.imagekit.io/demo/tr:w-300,h-100,cm-pad_resize,bg-FF000030/medium_cafe_B1iTdD0C.jpg
Border Transformation
The border transformation, as the name suggests, adds a border to the image. It accepts two parameters - the width of the border and the color of the border.
The transformation is represented using the keyword 'b'. The width is specified as a number which is equivalent to the border width in pixels. The color code is specified as a 6-character hex code RRGGBB.
Syntax
b-<width>_<hex_code_rrggbb>
For example,
1. Adding a 5 pixel yellow border to a 300px resized image
https://ik.imagekit.io/demo/tr:w-300,b-5_FFF000/medium_cafe_B1iTdD0C.jpg
2. Adding a 20 pixel red border to a 300px resized image
https://ik.imagekit.io/demo/tr:w-300,b-20_FF0000/medium_cafe_B1iTdD0C.jpg
