Background Image

Background images are a great way to fit one or more images inside the background of an element. The many options available in the settings make this property very useful for many use cases.

Adding background images

You can add a background image to an element under the Decoration section in the Style Manager.

  1. Click on the Add icon under the Background.

  2. It will open the layer section.

  3. Click on the layer then click on the images, it will open the assets manager (or) gallery.

  4. Choose any of the uploaded images or Upload the new image. It will be added as the background for the selected element.

Adding Background Images

Size

You can specify the size of the background image by using one of the presets: cover or auto or contain. These preserve the original proportions and aspect ratio of the image.

Background Size Property

Cover

This scales the image to fill and cover the whole background of the element — no blank spaces. The image may be trimmed off depending on the aspect ratio of the element, the device screen size, and the image. This is the most common setting for background images in sections. Note that this value overrides any set width and height.

Contain

Contain scales your image to stay contained inside the element, never exceeding the size of the element. This value also overrides any set width and height.

Auto

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

Position

By default, a background-image is placed at the left-top corner of an element. You can select from the different preset positions by choosing the different to justify your image content.

Background Position

Attachment:

Here you can choose whether the background image will scroll with the page (default) or remain fixed in place as you scroll. Setting it to fixed can create a semi-parallax effect.

Background Attachment

Note that setting a background image to fixed will force the background image width to be contained in the viewport instead of the element bounds.

Note

You can even use the CSS section in the Code Editor to customize all these settings