How to style a background image

This tutorial demonstrates how to set a page background image. To set it on some component, select the component instead of the whole page in the Designer card.

PreviousHow to get rid of the default input outline NextHow to style components (basics)

Last updated 1 year ago

How to style a background image

This tutorial demonstrates how to set a page background image. To set it on some component, select the component instead of the whole page in the Designer card.

Upload a new image to the flow assets:

Open the “Assets” card in the “Edit” sub-menu.
Click on “Upload Asset” and select the image from your device.

Adding a tag to which the background image settings are going to be applied:

Copy the image URL by clicking the “link” icon over the image preview in the “Assets” card (You’ll be pasting this URL later).
Switch to the “Designer” card and click on “Or edit the whole page.”
Add a representative tag to the page (E.g. “background_image”).
1. Click “Add a tag”.
2. Click “+ Add a tag to this page”.
3. Type the tag name and click “Add”.

Setting the background Image:

Go to the “Background” tab of the “Designer” card.
In the "Bg. Image" input type url( your image url ) replacing "your image URL" with the actual URL you have in your clipboard. (E.g. url(http://placekitten.com/200/300) ).

At this point, you’ll have your image already as the page background but it may need some adjustments, we’ll go through some of the most common ones next:

Most common background image properties to set:

You may want to watch the video to better understand the examples below!

Still in the “Background” tab of the “Designer” card:

“Bg. Repeat” if your image doesn’t cover the whole page and you don’t want to see the image repeated you should apply here the “no-repeat” value.
“Bg. Size”
1. “cover” this value would adjust the height and width so your image covers the whole container even if the shape doesn’t match so you may see the image being cut at the bottom or sides.
2. “contain” this option would make your image as big as possible without exceeding its container so the limit could be the height or maybe the width.
“Bg. Position”
1. You could set the image’s position by giving it two consecutive values for its X and Y axis respectively (e.g. “200px 250px” this would position the image at 200px from the left side and 250px from the top)
2. You could also set the position, for example, to the center by just writing “center”.

With this simple tutorial we’ve covered the properties you’ll need to use to be able to set the background image in most cases.

PreviousHow to get rid of the default input outline NextHow to style components (basics)

Last updated 1 year ago

Upload a new image to the flow assets:

Open the “Assets” card in the “Edit” sub-menu.
Click on “Upload Asset” and select the image from your device.

Adding a tag to which the background image settings are going to be applied:

Copy the image URL by clicking the “link” icon over the image preview in the “Assets” card (You’ll be pasting this URL later).
Switch to the “Designer” card and click on “Or edit the whole page.”
Add a representative tag to the page (E.g. “background_image”).
1. Click “Add a tag”.
2. Click “+ Add a tag to this page”.
3. Type the tag name and click “Add”.

Setting the background Image:

Go to the “Background” tab of the “Designer” card.
In the "Bg. Image" input type url( your image url ) replacing "your image URL" with the actual URL you have in your clipboard. (E.g. url(http://placekitten.com/200/300) ).

At this point, you’ll have your image already as the page background but it may need some adjustments, we’ll go through some of the most common ones next:

Most common background image properties to set:

You may want to watch the video to better understand the examples below!

Still in the “Background” tab of the “Designer” card:

“Bg. Repeat” if your image doesn’t cover the whole page and you don’t want to see the image repeated you should apply here the “no-repeat” value.
“Bg. Size”
1. “cover” this value would adjust the height and width so your image covers the whole container even if the shape doesn’t match so you may see the image being cut at the bottom or sides.
2. “contain” this option would make your image as big as possible without exceeding its container so the limit could be the height or maybe the width.
“Bg. Position”
1. You could set the image’s position by giving it two consecutive values for its X and Y axis respectively (e.g. “200px 250px” this would position the image at 200px from the left side and 250px from the top)
2. You could also set the position, for example, to the center by just writing “center”.

With this simple tutorial we’ve covered the properties you’ll need to use to be able to set the background image in most cases.