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 Section Element

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

Both methods will yield the same results, but may differ when it comes to responsive design.

Using the Image Element for a background image

This entirely depends 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. 

Using the Section Element for a background image

The Section Element will keep it's minimum height when changing device size, no matter what device your visitor is viewing your store on.

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.

Stopping the Section Element from cutting off the image

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

Setting the background size to 'contain' will ensure that the content will always be contained within the Section Element.

Please note, the Section Element will maintain the minimum height set.

Did this answer your question?