# 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 [<mark style="color:blue;">DEMO</mark>](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:

<figure><img src="/files/Ay5ypWIG2BY7Z8z2Z6CQ" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/popup/image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.