> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Using an overlay image as mask

In this [DEMO](https://fancyproductdesigner.com/product/button/), we have employed a particular technique. We have fashioned an image that mirrors the dimensions of the stage (canvas), albeit with a transparent circular area in the center.

__The white area is transparent__

![](https://storage.crisp.chat/users/helpdesk/website/-/f/7/a/b/f7ab09f78aa9d800/34894e75-3214-4b0c-ad8d-641803_13ovwve.png)

We have included the initial image element in the __Product Builder__ and activated the "Stay on Top" option in the __General__ section. This means that any image added by a customer will appear behind the overlay image, with only the visible portion within the circle being displayed.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/2/c/7/a2c7d180d44fa800/00548b14-0c55-4d9e-9af6-58c3ed_na6dj6.png)

Of course you can create your own image overlay and upload it, e.g. you can even have a transparent area that looks like a Phone-Case.

One other option would be to utilize masks as outlined in [this article](https://support.fancyproductdesigner.com/support/solutions/articles/13000035870-using-an-svg-as-mask-for-a-view).