Next Cloudinary
GitHubGitHub
  • Getting Started
  • Installation
  • Components
    • CldImage
      • Basic Usage
      • Configuration
      • Examples
    • CldOgImage
      • Basic Usage
      • Configuration
      • Examples
    • CldUploadButton
      • Basic Usage
      • Configuration
      • Examples
    • CldUploadWidget
      • Basic Usage
      • Configuration
      • Examples
    • CldVideoPlayer
      • Basic Usage
      • Configuration
      • Examples
  • Use Cases
    • Background Removal
    • Image Overlays
    • Image Underlays
    • Social Media Card
    • Text Overlays
    • Uploading Images & Videos
  • Guides
    • Next.js 13
    • Responsive Images
  • Resources
  • Getting Started
  • Installation
  • Components
    • CldImage
      • Basic Usage
      • Configuration
      • Examples
    • CldOgImage
      • Basic Usage
      • Configuration
      • Examples
    • CldUploadButton
      • Basic Usage
      • Configuration
      • Examples
    • CldUploadWidget
      • Basic Usage
      • Configuration
      • Examples
    • CldVideoPlayer
      • Basic Usage
      • Configuration
      • Examples
  • Use Cases
    • Background Removal
    • Image Overlays
      • Example
      • Learn More
    • Image Underlays
    • Social Media Card
    • Text Overlays
    • Uploading Images & Videos
  • Guides
    • Next.js 13
    • Responsive Images
  • Resources

On This Page

  • Example
  • Learn More
Question? Give us feedback →Edit this page on GitHub
  • Use Cases
  • Image Overlays

Overlaying Images

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

Example

Turtle with earth
<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 RemovalImage Underlays

MIT 2023 © Colby Fayock