# Add Image

{% stepper %}
{% step %}

#### Insert an Image

On the toolbar above, click the ![](https://207765737-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpRDG3vvgCOF596sbdkH0%2Fuploads%2FmjqyhsCUO52IVxIsDWWT%2Fimage.png?alt=media\&token=7e6cb0a8-aa19-4e52-980f-f1e301872f2f) button to insert an image.

A dialog will appear, allowing you to **select an image from your computer**. After selecting, the image will be **inserted into the designated frame** on the Report Page.
{% endstep %}

{% step %}

#### Adjust Size and Position

Once the image is added to the Report Page, users can:

* **Drag and drop** the image to adjust its position.
* **Drag the bottom-right corner** to resize the image as needed.
  {% endstep %}

{% step %}

#### Edit and Format the Image

In the **right sidebar**, under **Visualizations → Style** tab, users can configure the following options:

* **Type**: Determines how the image is displayed in the frame (details [below](#image-type-options))
* **Background**: Enable or disable the background color for the image container.
  * **Color**: Select a background color for the image container (default: white `#FFFFFF`).
  * **Transparency**: Set the image container’s transparency (0 = opaque, 100 = fully transparent).
* **Display for mobile**: Enable or disable image display on mobile devices. This helps optimize the layout for smaller screens.
* **Reset to default**: Restore all style settings to their default values.
  {% endstep %}

{% step %}

#### Arrange Display Order (Optional)

To change the display order:

* **Right-click** on the image.
* Choose the appropriate option ![](https://207765737-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpRDG3vvgCOF596sbdkH0%2Fuploads%2FT2MVlC2KT8svj94uOw1J%2Fimage.png?alt=media\&token=96bb48e0-4649-4935-9b7b-d72f517ffd7f) >> ![](https://207765737-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpRDG3vvgCOF596sbdkH0%2Fuploads%2FHW8L9YmmkN1nLXh5h4KI%2Fimage.png?alt=media\&token=a20c13bf-1da7-418e-991f-77b8309d33c7) to move the image behind other elements or use it as a report background.
  {% endstep %}
  {% endstepper %}

#### Image Type Options

You can choose how the image fits within the frame:

* **Fill**: Stretch the image to **fill the entire frame**. This may distort the image.
* **Contain**: Resize the image to **fit within the frame** while **preserving its aspect ratio**.
* **Cover**: Scale the image to **cover the entire frame** while **keeping the aspect ratio**. Some cropping may occur.
* **Scale down**: **Reduce** the image size only if it's larger than the frame. If smaller, retain the **original size**.
* **None**: Keep the **original image size**. No automatic resizing is applied.