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.
- 1.Open the “Assets” card in the “Edit” sub-menu.
- 2.Click on “Upload Asset” and select the image from your device.
- 1.Copy the image URL by clicking the “link” icon over the image preview in the “Assets” card (You’ll be pasting this URL later).
- 2.Switch to the “Designer” card and click on “Or edit the whole page.”
- 3.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”.
- 1.Go to the “Background” tab of the “Designer” card.
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:
- 1.“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.
- 2.“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.
- 3.“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.