For your background, you have the option between background color and a background image.

Background color

Background colors can be applied to all elements. Insert a color at the Body to add it to all elements or color separate layers (this will override the Body background color).

Click on the color name or colored square to open your color palette. You can unfold all underlying colors by clicking on the arrow pointing to the right next to each color name.

With the opacity slider below your palette, you can set the opacity of the color. 100% is full opacity and 0% is transparent, so no color at all.

In the Design controls, you can add and change the colors in your palette.

Background image

To apply a background image, you first need to upload one.

After that, you can apply different settings to your background image.

Position

With the arrows, you can align the picture as preferred. 

The round in the middle indicates a center position. By default, the position is set to the upper-left.

Size

Select Auto, Cover or Contain.

Auto stands for automatic and will display your picture in its original dimensions and repeat the image when it’s not large enough to cover all space.

Cover means the picture is scaled to fill the entire element, overriding any set width or height. Depending on the element, image and screen size, the image can be trimmed.

Contain scales your image to stay contained within the element, overriding any set width or height.

Repeat

When your picture isn’t large enough to fill the entire space and therefore repeats itself, you can set here how the background image should be repeated.

Choose from five different types of repetitions—both vertical and horizontal tiling.

Attachment

The attachment setting defines how the background image moves relative to the viewport when the page scrolls. You have to take into account both the main view (browser window) and the local view.

For this setting, you can select None, Fixed, Local or Scroll. 

Fixed is selected by default and when none is selected, the background image scrolls with the page.

When the background image is fixed, it will stay exactly in the same position at all times. So it won’t scroll, even when the rest does. Fixed positions are relative to the viewport.

With scroll, the background image scrolls with the browser but stays fixed inside the local view. It’s relative to the element it’s applied to. So, if you have an image background box with text on top and you scroll, the text will move but the image won’t.

Now as for local, it’s a combination of both. Unlike scroll, the local view is not fixed inside the local view. Meaning: It scrolls both with the main view and the local view. It’s relative to the element’s content. So if you take that same box from above, now both the text and the background image move simultaneously.