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.
Last updated
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.
Last updated
Open the โAssetsโ card in the โEditโ sub-menu.
Click on โUpload Assetโ and select the image from your device.
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โ).
Click โAdd a tagโ.
Click โ+ Add a tag to this pageโ.
Type the tag name and click โAddโ.
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:
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โ
โ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.
โ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โ
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)
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.