⬆️How to upload and apply images to your design

Instructions on how to upload an image and use it in an image component or as a background image in a component using the "Assets" and "Designer" cards.

You may also want to check out our documentation on “How to style a background image”

Uploading and applying images to your design.

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-3cb7a56f8249firebasestorage.googleapis.com

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:

How to style a background image

Styling CSS properties that are not there in the designer card (custom properties)

Adding new components to a page