Overlaying Images

You can add images on top of other images by using image-based overlays.

Example

<CldImage
  width="960"
  height="600"
  src="images/turtle"
  sizes="100vw"
  overlays={[{
    publicId: 'images/earth',
    position: {
      x: 50,
      y: 50,
      gravity: 'north_west',
    },
    effects: [
      {
        crop: 'fill',
        gravity: 'auto',
        width: 500,
        height: 500
      }
    ]
  }]}
  alt="Turtle with earth"
/>

Learn More

CldImage Configuration

Last updated on March 9, 2023

Background Removal Image Underlays