Skip to content

Remove a Background from an Image

Astro Cloudinary supports background removal and modification.

The CldImage component removes backgrounds from images using the removeBackground prop.

Examples

Remove Background

CldImage
getCldImageUrl

import { CldImage } from 'astro-cloudinary';

<CldImage
  width="960"
  height="600"
  src="<Your Public ID>"
  sizes="100vw"
  removeBackground
  alt=""
/>

import { getCldImageUrl } from 'astro-cloudinary';

getCldImageUrl({
  src: '<Your Public ID>',
  removeBackground: true
})

Color Change

Use background to specify a background color.

import { getCldImageUrl } from 'astro-cloudinary';

getCldImageUrl({
  src: "<Your Public ID>",
  removeBackground: true,
  background: "blueviolet"
});

Replace with Image

Use underlay: "<Your Public ID>" to specify an image to use as a background.

import { getCldImageUrl } from 'astro-cloudinary';

getCldImageUrl({
  src: "<Your Public ID>",
  removeBackground: true,
  underlay: "<Your Public ID>"
});

AI-Generated Background

Use replaceBackground="<prompt>" for an AI-generated prompt-based background.

import { CldImage } from 'astro-cloudinary';

<CldImage
  width="960"
  height="600"
  src="<Your Public ID>"
  sizes="100vw"
  crop="fill"
  replaceBackground="<Prompt>"
  alt=""
/>

Learn More