Background Image

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

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

Adding background images

You can add a background image to an element under the Background section in the Styles panel. Just click on the Background Image icon.

Background images won’t be visible on image and video elements.

Background image settings

There are a number of options that you can set for the background image. These settings can be accessed by clicking on any background image layer in the Styles panel.

Image

Choose a background image from the Asset Panel. Enabling HiDPI will set the width of the background image to be half of its original image size so that it renders sharply on HiDPI devices.

Size

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

Width & Height

You can type a specific width or height. You can also use percentage values here. If you want the image to scale larger than the element it's set on, you can use percentages higher that 100%.

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.

Position

By default, a background-image is placed at the top-left corner of an element. You can select from the different preset positions by clicking on the arrows or the center box to justify your image content. You can even click and drag to manually adjust the positioning.

Adjusting the positioning is useful to determine which part of the image is visible when the element’s dimensions are changed on different screen sizes.

Tile

By default, a background image is repeated both vertically and horizontally. You can choose to repeat the background only horizontally, vertically, or to not repeat at all.

Fixed/Scroll

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.

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.

Stacking Background images

You can add and stack multiple background images as layers to create all sorts of layered image effects. You can also add gradient or solid color overlays on your background images.