Using content aware padding
Using content aware padding
Presentation
Cropping
Creative
Intermediate

There are many cases where you need to adjust the background of your images.

Cloudinary offers the option to set the background of your images in many different ways.

Its possible to use the pad cropping option, together with the background parameter (b_ in URLs) to have the image background be changed to a specific color.

For example, if we change the background to green the image would look like:

https://res.cloudinary.com/demo/image/upload/w_800,h_400,c_pad,b_green/waterfall.jpg

It's also possible to assign an RGBA value to the background parameter :

https://res.cloudinary.com/demo/image/upload/w_800,h_400,c_pad,b_rgb:6600cc/waterfall.jpg

If you want to match the image's background to its content you could let Cloudinary determine the background automatically by setting the background parameter to auto:

https://res.cloudinary.com/demo/image/upload/w_800,h_400,c_pad,b_auto/hotair_baloon.jpg

And if you want your image to be contrasted against the background, you could let Cloudinary choose the most contrasting color in the image, and use that as background by specifying auto:predominant_contrast for the background:

https://res.cloudinary.com/demo/image/upload/w_800,h_400,c_pad,b_auto:predominant_contrast/hotair_baloon.jpg

You could even make your background come alive by letting cloudinary choose the most contrasting color in the image and then use a gradient of that color as the background

http://res.cloudinary.com/demo/image/upload/w_800,h_400,c_pad,b_auto:predominant_gradient_contrast:4/multicolored_image

Its also possible to add the gradient_fade effect with a value of symmetric_pad (e_gradient_fade:symmetric_pad in urls) to have the background fade into the image itself:

http://res.cloudinary.com/demo/image/upload/w_800,h_400,c_pad,b_auto:predominant_gradient_contrast:4/e_gradient_fade:symmetric_pad:5/multicolored_image