# Form Features - Sketch Component with Dynamic Background

## Overview

This article explains how to configure the **SharinPix Sketch Component** with a customizable background.

This article explains:

* [How to configure a **background image**](#sketch-with-static-url)
* [Demo of a **dynamic background image using a URL with a Car Inspection Example**](#sketch-with-dynamic-url)

## Getting Started

### How to configure a background image

Follow these steps to add a static background URL to your form sketch.

* On the Form Editor Page, select a sketch component and find "Background Image URL" under the "General" tab.
* Configure the formula to accept the URL of an image.

<figure><img src="https://2647402409-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRD1Xcn9HtKcyfQ9Ghyk%2Fuploads%2FqXlPPzuKlxl9OArT0p53%2FDOC%20-%20Sketch%20with%20Dynamic%20Background%20(2).png?alt=media&#x26;token=ea462c87-eeda-4e0e-8ebd-937434c29922" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Info:**

For more information on the Functions and Expressions of the Background Image URL, please follow the article:  [Form Formulas](https://docs.sharinpix.com/forms/form-elements/sharinpix-form-formula-functions-and-operators)
{% endhint %}

### Demo: Car Inspection Example

This section will demonstrate how to configure the sketch element with a dynamic background in the context of a car inspection. The use case here is a car inspection after a lease, and one of the steps required is to highlight areas of damage on the vehicle.

Follow these steps to configure a dynamic background URL on your sketch:

* Configure a text component on the SharinPix Form so that it [pulls data from Salesforce](https://docs.sharinpix.com/forms/form-elements/form-features-default-or-prefill-values) and makes it disabled. We need the text component in order to have a field that contains the value of `Car_Model__c` which will be used as the background for the sketch.

<figure><img src="https://2647402409-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRD1Xcn9HtKcyfQ9Ghyk%2Fuploads%2FNZV4568phWVMl8AyERCE%2FDOC%20-%20Sketch%20with%20Dynamic%20Background%20(3).png?alt=media&#x26;token=20047a77-a2b6-4c23-8adb-8e38b0d5b7d8" alt=""><figcaption></figcaption></figure>

* Configure the API name of the text component.

<figure><img src="https://2647402409-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRD1Xcn9HtKcyfQ9Ghyk%2Fuploads%2FlObgsyjo14lo7cEQlY44%2FDOC%20-%20Sketch%20with%20Dynamic%20Background%20(4).png?alt=media&#x26;token=0d6457fc-c525-4d75-bcde-d795ee7d2861" alt=""><figcaption></figcaption></figure>

* On the SharinPix Sketch component, go to the "Background Image URL" configuration and set it to use the value of the text element 'Car Model URL' that was just configured.

<figure><img src="https://2647402409-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRD1Xcn9HtKcyfQ9Ghyk%2Fuploads%2Ftp9xGIeMpLZGnCOTR4qt%2FDOC%20-%20Sketch%20with%20Dynamic%20Background%20(5).png?alt=media&#x26;token=645f7b93-0c64-4d19-a49e-0bd29ab6720c" alt=""><figcaption></figcaption></figure>

### Results:

#### Example 1 - Sedan Record

<figure><img src="https://2647402409-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRD1Xcn9HtKcyfQ9Ghyk%2Fuploads%2FzJaL3x3ArQSNiAaBolc8%2F3.png?alt=media&#x26;token=569195ed-6409-4612-9e9c-a4e29c7f5f2c" alt=""><figcaption></figcaption></figure>

* When opening a Car Inspection record for a Sedan, the form will load the Sedan background image.

<figure><img src="https://2647402409-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRD1Xcn9HtKcyfQ9Ghyk%2Fuploads%2F6vo3aMedn7BSWXJgCI5a%2F4.png?alt=media&#x26;token=4291ff61-4988-4a24-842c-dd888678fe84" alt=""><figcaption></figcaption></figure>

#### Example 2 – Hatchback Record

<figure><img src="https://2647402409-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRD1Xcn9HtKcyfQ9Ghyk%2Fuploads%2Fx0Wlhet8cecSfxqGvavl%2F5.png?alt=media&#x26;token=a29decbd-981d-477e-a7fb-743fe9b38e99" alt=""><figcaption></figcaption></figure>

* If the same form is opened on a Hatchback record, the Sketch component will display the Hatchback background image.

<figure><img src="https://2647402409-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRD1Xcn9HtKcyfQ9Ghyk%2Fuploads%2FTcHaIyPZmN3jq4pjK6Et%2F6.png?alt=media&#x26;token=a25f24ff-4bad-4c32-8358-3c9f62f5b0bc" alt=""><figcaption></figcaption></figure>