Skip to main content

How to add the tiling/repeating watermark effect to your images?

Nadav Ofir
Updated

Adding a tiling watermark effect to your images is now easier than ever, using the tiled flag (fl_tiled for URLs).

All you have to do in order to personalize your images is to overlay your watermark and set the tiled flag, for example:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,w_0.2,fl_relative.tiled/kitten_fighting.gif

You can further customize the tiled watermark to suit your needs.
Some transformations (e.g. resize and displacement) may require using the layer_apply flag (fl_layer_apply for URLs), as in the following example:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,e_brightness:200,o_50,w_0.3,fl_relative/e_negate,a_-10/fl_tiled.layer_apply/kitten_fighting.gif

Additionally, You can add room between tiles:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,w_1.5,c_lpad,e_brightness:200,o_50/w_0.3,fl_relative/fl_layer_apply.tiled/kitten_fighting.gif

Notice the use of the relative flag (fl_relative) in the above examples which makes the resizing of the watermark to be relative to the size of the image it is placed upon. More information regarding the relative flag can be found here.

 

Take advantage of the CodeSandbox provided below to explore various image-tiling watermark transformations. Keep in mind that the possibilities for applying effects to your image are not limited to this example.

Related articles

Comments

3 comments

Date Votes
  • Sebastian Arias

    It would be awesome if you add some pieces of code for node, python etc...

    0
  • Yakir Perlin

    Hi Sebastian,

    Thank you for your suggestion.

    Please see how to create this transformation with Python:

    CloudinaryImage("kitten_fighting.gif").image(effect="brightness:200", flags=["relative", "tiled"], overlay="cloudinary_icon", opacity=50, width=0.3, crop="scale")

    And Node.js:

    cloudinary.image("kitten_fighting.gif", {effect: "brightness:200", flags: ["relative", "tiled"], overlay: "cloudinary_icon", opacity: 50, width: "0.3", crop: "scale"})
    1
  • Sebastian Arias
    Edited

    Thanks for the fast reply Yakir! That piece of code really helped me accomplished what I needed!

    1

Please sign in to leave a comment.