Adding Background Media

The Background Media property established background images for an element.

Summary

1. To incorporate an image, select Add layer and then Media.

Just like setting the background color, background media can also be defined per breakpoint. For this tutorial, all breakpoints will feature the same background image. Click Add media to proceed.

2. At this point, there’s the option to either create a new media asset by clicking the Create new asset at the top right, or select from the Existing media.

For this tutorial, the existing media will be used.

Choose the image intended for use as the background. Within the image layer editor, you have the option to set the position of the image.

The Background Position X attribute determines the horizontal placement of a background image within its container. Within the Background Position X field, the image can be positioned to the left, center, or right.

Choose Center.

3. The Background Position Y attribute establishes the initial vertical placement for the background image. Within the Background Position Y field, the image can be positioned to the top, center, or bottom.

Choose Center.

The Background Repeat property determines whether the background image is repeated across the element.

Choose No Repeat.

4. The Background Size property dictates how the background image should be sized and scaled within the element.

There are three available options for this property: Auto, Contain, and Cover.

The Auto property displays the image in its original size.

The Contain property scales the image to fit within the element without cropping, ensuring the entire image is visible, though there may be empty space around it if aspect ratios don’t align perfectly.

The Cover option scales the image to cover the entire element while preserving its aspect ratio. Consequently, some parts of the image may be cropped to fit the entire element.

Similar to solid colors, you can also set the background image’s Opacity.

Once done, click Save.

5. The image height varies depending on the amount of content; less content results in a reduced height.

To adjust the height as you prefer, head to the Background Height section and set the height individually for each breakpoint.

Observe how the image expands to reveal its entirely.