# Product image background

## Product images with transparency

Before:

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MH_Kp55pWhguRnFAvBy%2F-MH_OI63eFAX4cR0PWLe%2Fdocs-front-kategorie-cards-background-before.png?alt=media\&token=24c99201-0cca-4259-8312-f2f44d784a83)

After:

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MH_T7trrc6iZ6pgW4Gm%2F-MH_OKOfFhMshpA_T_RB%2Fdocs-front-kategorie-cards-background-after.png?alt=media\&token=6e2d9d9b-e2ba-4cd2-9060-2adc3eed7e90)

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](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FrvzY4Kt2GBSEPTDUGtWR%2Fdocs-en-content-product-images-background-theme-configuration.png?alt=media\&token=9efcc0e6-5b36-4887-bb94-ecef9f93984c)

## 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 %}

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MH_PSAfMbfXNwg91fxl%2F-MH_S9ROTjjuMRoQ6YEA%2Fdocs-front-kategorie-cards-background-overlay.png?alt=media\&token=72737c4a-11eb-4d92-8325-7674ac2689ec)

{% 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 %}

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FQ3T3T6RERlshXs6qKiQ5%2Fdocs-en-content-product-images-background-overlay-theme-configuration.png?alt=media\&token=2a864f31-0bf6-4c65-b19f-075d3802286c)