Background images are a great way of overlaying your content on your sites. There are currently two methods of doing this. The first is to use a Container Element:

The alternative method is to use the Image Element to overlay your content.

Both methods let you add a background image, but they behave differently when it comes to responsive design.

Which method to use depends entirely on the design of your site. There are various different applications for each element.

The Image Element will maintain the aspect ratio of the image, no matter what device your visitor is viewing the store on.

Note: Content you drop onto an Image element is overlaid on the image, so choose the image first. If the Image element has no image, the overlaid content can overlap the content below it on the live page, even though it looks fine in the editor.

The Container Element will keep its minimum height when changing device size, no matter what device your visitor is viewing your store on.

What you may have noticed for the container with a background image is that in different views the image appears to be cut off. In this case the bottom of our glass does not show on larger screens.

This is because containers have their minimum height set at the same value across all screens. This prevents containers from being truly responsive.

Note: background images do not have alt tags as they are decorative visuals added through CSS styles. They are not added into the content of the page and therefore are not detected by search engines or screen readers.

In order to prevent the Container Element from cutting your image off, you can change the background size of the Container Element.

To find the Background size option:

Setting the background-size to 'contain' will ensure that the content will always be contained within the Container Element.
​
Please note, the Container Element will maintain the minimum height set.