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 will yield the same results, but may differ when it comes to responsive design.

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. 

The Container 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.

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

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.