> ## Documentation Index
> Fetch the complete documentation index at: https://fillout.com/help/llms.txt
> Use this file to discover all available pages before exploring further.

# Add images or GIFs to your form

> Create visually appealing forms that stand out with images. Add individual images or GIFs, a background image, multiple picture choices or a combination of these. 

## How to add an image or GIF

<Steps>
  <Step title="Add an image field">
    Click `Image` in the field choices. Next, click **Change image** in the center of your screen.

    <img src="https://mintcdn.com/fillout-005a867b/4Eo5jhWzoav1AI5P/images/Screenshot2025-11-28at4.44.14PM.png?fit=max&auto=format&n=4Eo5jhWzoav1AI5P&q=85&s=cefe3a33d22d0b5f3e5af3e812017d61" alt="Screenshot 2025-11-28 at 4.44.14 PM.png" width="2645" height="1438" data-path="images/Screenshot2025-11-28at4.44.14PM.png" />
  </Step>

  <Step title="Choose an image or GIF">
    You can select an image from **Unsplash**, copy and paste an image's **Link** or **Upload** an image from your desktop.

    <img src="https://mintcdn.com/fillout-005a867b/SVULX_5c8yh6MT9m/images/ig2.webp?fit=max&auto=format&n=SVULX_5c8yh6MT9m&q=85&s=65ee3d8be419f68f99583f325773d388" alt="Screenshot of the Form designer tab of a form" style={{ width:"78%" }} width="1254" height="978" data-path="images/ig2.webp" />
  </Step>

  <Step title="Edit dimensions">
    To change the **Max height** and **Alignment** of your image, click its <Icon icon="gear-complex" iconType="solid" />.

    <img src="https://mintcdn.com/fillout-005a867b/4Eo5jhWzoav1AI5P/images/Screenshot2025-11-28at4.46.37PM.png?fit=max&auto=format&n=4Eo5jhWzoav1AI5P&q=85&s=1ef0ae855d21d9dd3d66d0656871899f" alt="Screenshot 2025-11-28 at 4.46.37 PM.png" title="Screenshot 2025-11-28 at 4.46.37 PM.png" style={{ width:"86%" }} width="2120" height="1315" data-path="images/Screenshot2025-11-28at4.46.37PM.png" />
  </Step>
</Steps>

## Set a background image

Click `Theme` to open the **Form designer**. Then, click `Add image`.

<img src="https://mintcdn.com/fillout-005a867b/v5r8IML5HmlJOxLS/images/Screenshot2025-11-28at8.09.14PM.png?fit=max&auto=format&n=v5r8IML5HmlJOxLS&q=85&s=49acb135d7a9cc72cc049bfa8711d72a" alt="Screenshot 2025-11-28 at 8.09.14 PM.png" width="2644" height="1442" data-path="images/Screenshot2025-11-28at8.09.14PM.png" />

**Upload** the image from your desktop, choose an image from **Unsplash** or paste an image's **Link**.

<Warning>
  The top left form position doesn't allow adding a background image.
</Warning>

That's it! Your image will now be shown on every page, except for cover pages (if applicable).

### Adjust image view

To adjust which part of the image is visible, hover over it and click `Position`. You can also edit the brightness of your image in the left-hand panel.

<img src="https://mintcdn.com/fillout-005a867b/Sgr-RT-igae2UzfF/images/Screenshot2025-11-28at7.54.07PM.png?fit=max&auto=format&n=Sgr-RT-igae2UzfF&q=85&s=8b4d3f9a957c104c7f956176ed410725" alt="Screenshot 2025-11-28 at 7.54.07 PM.png" width="2643" height="1435" data-path="images/Screenshot2025-11-28at7.54.07PM.png" />

<Note>
  For a full page image, generally 16:9 is best or 1280 x 720. For side-by-side layouts, 512 x 720 is the ideal size.
</Note>

## Add images to choices

<Steps>
  <Step title="Add a picture choice field">
    Click the `Picture choice` field. Next, hover over one of the choices and click **Edit** followed by **Change image**. Repeat this for the rest of the choices.

    <img src="https://mintcdn.com/fillout-005a867b/Sgr-RT-igae2UzfF/images/Screenshot2025-11-28at8.02.14PM.png?fit=max&auto=format&n=Sgr-RT-igae2UzfF&q=85&s=a57a15d6f8f3e01d715853d72705f77b" alt="Screenshot 2025-11-28 at 8.02.14 PM.png" width="2644" height="1442" data-path="images/Screenshot2025-11-28at8.02.14PM.png" />
  </Step>

  <Step title="Edit dimensions">
    You can change each image’s **Height** in the right-hand panel by clicking its <Icon icon="gear-complex" iconType="solid" />. In the right-hand panel, go to **Layout**.

    <img src="https://mintcdn.com/fillout-005a867b/Sgr-RT-igae2UzfF/images/Screenshot2025-11-28at8.05.24PM.png?fit=max&auto=format&n=Sgr-RT-igae2UzfF&q=85&s=7e34ab5c8186b4bab1f55f370caf534c" alt="Screenshot 2025-11-28 at 8.05.24 PM.png" title="Screenshot 2025-11-28 at 8.05.24 PM.png" style={{ width:"85%" }} width="2037" height="1201" data-path="images/Screenshot2025-11-28at8.05.24PM.png" />
  </Step>

  <Step title="Edit the choice background color (Optional)">
    You can also change the default white **Option background color** under **Basic**.

    <img src="https://mintcdn.com/fillout-005a867b/CKiuqsV2M8JgNFaD/images/ig9.webp?fit=max&auto=format&n=CKiuqsV2M8JgNFaD&q=85&s=89d133e92320362db5ff45a1505e80a1" alt="Screenshot of the Form designer tab of a form" style={{ width:"36%" }} width="500" height="544" data-path="images/ig9.webp" />
  </Step>
</Steps>

## Related articles

<CardGroup cols={3}>
  <Card color="#FFC738" icon="airbnb" iconType="regular" href="/logo" title="Add a logo">
    Add a professional touch and create strong brand identity.
  </Card>

  <Card color="#FFC738" icon="rectangles-mixed" iconType="regular" href="/layout" title="Page layout">
    Edit the position of your form's fields and background image.
  </Card>

  <Card color="#FFC738" icon="palette" iconType="regular" href="/themes" title="Themes">
    Select from hundreds of themes or create your own.
  </Card>
</CardGroup>
