# How to upload and apply images to your design

{% hint style="info" %}
You may also want to check out our documentation on “[How to style a background image](https://docs.trysavvy.com/how-tos/design-how-tos/how-to-style-a-background-image)”
{% endhint %}

## **Uploading and applying images to your design.**

{% embed url="<https://firebasestorage.googleapis.com/v0/b/savvy-flow-uploads/o/oNrQLV6ZiVBavUmAkfcu%2FUploading%20and%20applying%20images%20to%20your%20design-%20(1)_7724386863424542.mp4?alt=media&token=917ae6b9-3df2-4674-b355-3cb7a56f8249>" %}

Upload an image from your device:

1. In the “**Edit**” sub-menu open the “**Assets**” card.
2. Click “**Upload Asset**”.
3. Select the image from your device.

#### Using your image in an image component:

1. With the “**Assets**” card still open, select an image component on the page.
2. Click on the image preview in the “**Assets**” card.
3. That’s it, you’ll now see the image has been replaced.

#### Using your image as a background image:

1. In the “**Assets**” card, over the preview of your image, you’ll see 2 small icons. Click on the link icon to copy the image URL.
2. Switch to the “**Designer**” card.
3. Select the component to which you want to apply the image as a background.
4. Always in the “**Designer**” card, switch to the “**Background**” tab.
5. Click on the “**Bg. Image**” input.
6. Type url( ) and in between the ( ) paste the link you’ve copied on step number 1. E.g. `url([<http://placekitten.com/200/300>](<http://placekitten.com/200/300>))`

That’s it, you now have your image as the components background image. If is not looking so great you might need to style it a little more. Check our related documents.

### Related docs:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>How to style a background image</strong></mark></td><td><a href="how-to-style-a-background-image">how-to-style-a-background-image</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F5aJMK5l4iCHd0UewMjRy%2F2023-03-07_11h56_31.png?alt=media&#x26;token=ea3f9472-d9bb-469d-a23c-8afb9eb23c7a">2023-03-07_11h56_31.png</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Styling CSS properties that are not there in the designer card (custom properties)</strong></mark></td><td><a href="how-to-style-css-properties-that-are-not-there-in-the-designer-card-custom-properties">how-to-style-css-properties-that-are-not-there-in-the-designer-card-custom-properties</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2Fxns1t1b9iwf5LJDeILKK%2F2023-03-07_11h57_53.png?alt=media&#x26;token=581963b5-2e2a-413c-9717-77db7b149484">2023-03-07_11h57_53.png</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Adding new components to a page</strong></mark></td><td><a href="../general-how-tos/how-to-add-new-components-to-a-page">how-to-add-new-components-to-a-page</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F1JRnLSAxeNKgRdvwGTec%2F2023-03-07_11h50_47.png?alt=media&#x26;token=8eec199b-e48b-46ef-86a6-c6d81c6da961">2023-03-07_11h50_47.png</a></td></tr></tbody></table>


---

# 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://docs.trysavvy.com/how-tos/design-how-tos/how-to-upload-and-apply-images-to-your-design.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.