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
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=""/>