# Overlay an image
<a name="overlay-an-image"></a>

This solution can overlay images on top of others, for cases like watermarking copyrighted image. To overlay an image, add the **overlayWith** property to the **edits** property in the [image request](use-the-solution-with-a-frontend-application.md).

 **overlayWith(optional, object)** - Overlays an image on top of the original. For example:

```
const imageRequest = JSON.stringify({
    bucket: "<myImageBucket>",
    key: "<myImage.jpeg>",
    edits: {
    overlayWith: {
        bucket: "<myImageBucket>",
        key: "<myOverlayImage.jpeg>",
        alpha: 0-100, // Opaque (0) to Transparent (100)
        wRatio: 0-100, // Ratio of the underlying image that the overlay width should be
        hRatio: 0-100, // Ratio of the underlying image that the overlay height should be
        options: {
                top: "-10p",
                left: 150
            }
        }
    }
})
```

The following **overlayWith** variables are shown in the previous code sample:
+  **overlayWith.bucket (required, string)** - Specifies the bucket that the overlay image should be retrieved from. This bucket must be present in the `SOURCE_BUCKETS` parameter.
+  **overlayWith.key (required, string)** - Specifies the object key that is used for the overlay image.
+  **overlayWith.alpha (optional, number)** - Specifies the opacity that should be used for the overlay image. This can be set from 0 (fully opaque) and 100 (fully transparent).
+  **overlayWith.wRatio (required, number)** - Specifies the percentage of the width of underlying image that the overlay image should be sized to. This can be set from 0 and 100, where 100 indicates that the overlay image has the same width as the underlying image.
+  **overlayWith.hRatio (required, number)** - Specifies the percentage of the height of underlying image that the overlay image should be sized to. This can be set from 0 and 100, where 100 indicates that the overlay image has the same height as the underlying image.
+  **overlayWith.options.top (optional, number \$1 string)** - Specifies the distance in pixels from the top edge of the underlying photo that the overlay should be placed. A number formatted as a string with a `p` at the end is treated as a percentage.
+  **overlayWith.options.left (optional, number \$1 string)** - Specifies the distance in pixels from the left edge of the underlying photo that the overlay should be placed. A number formatted as a string with a `p` at the end is treated as a percentage.

**Note**  
 **overlayWith** is not fully supported for animated (such as, GIF) images. Instead, only the first frame will receive an overlay.