Image Underlays

An image underlay allows you to place one image under another (it doesn’t work with text). For example we can remove the background from this turtle image, then underlay an image of space:

<CldImage />

<script>
  import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
  width="960"
  height="600"
  src="images/turtle"
  sizes="100vw"
  alt="Turtle swimming in a galaxy"
  removeBackground
  underlay="images/galaxy" />

getCldImageUrl()

import { getCldImageUrl } from 'svelte-cloudinary';

const url = getCldImageUrl({
  width: 960,
  height: 600,
  src: 'images/turtle',
  removeBackground: true,
  underlay: 'images/galaxy',
});