> For the complete documentation index, see [llms.txt](https://docs.sharinpix.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sharinpix.com/forms/form-elements/form-features-sketch-component-with-dynamic-background.md).
# 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.
You can also use an image captured in another question as the dynamic background of the **Sketch** component. To do this, reference the Capture question’s `media` attribute and select either `firstUrl` or `lastUrl`, depending on which captured image you want to use.
In the example below, `roof_photos.media.lastUrl` uses the most recently captured image from the **Roof Photos** question as the Sketch background.
{% hint style="info" %}
**Info:**
For more information on the Functions and Expressions of the Background Image URL, please follow these articles: [Form Formulas](/forms/form-elements/sharinpix-form-formula-functions-and-operators.md) and [Formula Fields and Attributes](/forms/form-elements/sharinpix-form-formula-fields-and-attributes.md)
{% 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](/forms/form-elements/form-features-default-or-prefill-values.md) 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.
* Configure the API name of the text component.
* 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.
### Results:
#### Example 1 - Sedan Record
* When opening a Car Inspection record for a Sedan, the form will load the Sedan background image.
#### Example 2 – Hatchback Record
* If the same form is opened on a Hatchback record, the Sketch component will display the Hatchback background image.
### Demo: Roof Inspection example
In this example, the technician first captures a photo of the roof using the **Roof photo** Capture question. The captured image is then automatically reused as the background of the **Mark damage** Sketch component, allowing the technician to annotate the photo directly and highlight any damaged areas.
The Sketch component uses `capture.media.lastUrl` as its dynamic background, which retrieves the most recently captured image from the **Roof photo** question.
The **Visible When** formula `capture.media.count > 0` ensures that the Sketch component is only displayed after at least one image has been captured.
Once the roof photo is captured, it is displayed automatically as the Sketch background. The technician can then draw directly on the image to identify and document the damaged area as shown in the example below.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.sharinpix.com/forms/form-elements/form-features-sketch-component-with-dynamic-background.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
.png?alt=media&token=ea462c87-eeda-4e0e-8ebd-937434c29922)
.png?alt=media&token=48a57f2c-26a3-4a2b-9053-97ab97af880f)
.png?alt=media&token=20047a77-a2b6-4c23-8adb-8e38b0d5b7d8)
.png?alt=media&token=0d6457fc-c525-4d75-bcde-d795ee7d2861)
.png?alt=media&token=645f7b93-0c64-4d19-a49e-0bd29ab6720c)
.png?alt=media&token=07cd6eeb-d0e8-42e8-9862-452757406b43)
.png?alt=media&token=e6c1fd64-5f96-41f0-bc80-542f320c5667)