> For the complete documentation index, see [llms.txt](https://docs.trysavvy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trysavvy.com/how-tos/design-how-tos/how-to-upload-and-apply-images-to-your-design.md).

# 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](/how-tos/design-how-tos/how-to-style-a-background-image.md)”
{% 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="/pages/2W1WHsuk2qqI33dOY8XG">/pages/2W1WHsuk2qqI33dOY8XG</a></td><td><a href="/files/GOme8VKi8Sec3RiVhnrO">/files/GOme8VKi8Sec3RiVhnrO</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="/pages/WliAot81uLt3ZRntYnOE">/pages/WliAot81uLt3ZRntYnOE</a></td><td><a href="/files/cQ06XGQZXmLIbPKYHE4l">/files/cQ06XGQZXmLIbPKYHE4l</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Adding new components to a page</strong></mark></td><td><a href="/pages/CYZlvFhFj3pqeIkQAKij">/pages/CYZlvFhFj3pqeIkQAKij</a></td><td><a href="/files/ULoWWXk6EacBTLfzAtni">/files/ULoWWXk6EacBTLfzAtni</a></td></tr></tbody></table>