> ## 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/-/1/b/9/5/1b95b1eb2309c400/0e97caf4-8ad3-455e-bec3-3a7b1c_jsb3d.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/-/1/d/e/8/1de80c81fa02ad00/7ef8bd08-ae1a-430d-90a6-2da2cf_ff5twb.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).