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.

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.

The Background-size option can be found by:

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.