> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/content/product-images/product-image-background.md).

# Product image background

## Product images with transparency

Before:

![](/files/-MH_OI63eFAX4cR0PWLe)

After:

![](/files/-MH_OKOfFhMshpA_T_RB)

For transparent product images it is sufficient to use the **Background (1)** color.

{% hint style="info" %}
The option **Background-color overlay (2)** is only needed on non-transparent / non-cropped product images.
{% endhint %}

![Theme configuration: Tab: General > Section: Product images](/files/99SeT1tEzXkYaIL4qUj1)

## Product images without transparency

Very few product images are available as transparent PNG with a cut-out motif. But this effect can also be reproduced here. Following the example of Amazon.de, we have developed a solution that allows us to tint white background colors. 

{% hint style="warning" %}
In order not to distort the color of the product image too much, the backgrounds can only be displayed in light color tones.
{% endhint %}

![](/files/-MH_S9ROTjjuMRoQ6YEA)

{% hint style="info" %}
The background color overlays the product image with a visibility of 5%, so a very dark **Background (1)** color must be chosen. Now you have to activate the **Background-color overlay (2)** option.
{% endhint %}

![](/files/NoODCxV1LO7IhuvJZIEV)