# Image
In the **"Image"** selector, press "Select" to upload the necessary animation for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).
Use the **"Height"** options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down:
* **"Adapt to image"**. Displays an image/video in its original aspect ratio.
* **"Proportion of height"**. Select the option to adjust a media height as a percentage using the **"Proportion of height"** scale. The parameters can be changed from 0% to 200%.
**"Proportion of height"** indicators:
\* 100% = Square image
\* Less than 100% = Landscape
\* More than 100% = Portrait
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
To use an image as a background, activate the **"Set as background"** option.
{% hint style="success" %}
The example of the background image for the pop-up can be viewed on the [DEMO](https://unicorn-theme-sunny.mpthemes.net/).
{% endhint %}
### Media overlay
Turn on the **"Enable"** option to display the related settings.
Adjust the transparency of an image color overlay using the **"Opacity"** scale, which ranges from 0 to 100%.
In the **"Type"** picker, select one of the options: "Background" or "Gradient".
By selecting the **"Background"** option, change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.
Press the **"Gradient"** option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option [here](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#image).
In the following example, you can view how the block might be displayed in the section:
