Responsive Background Images Mixin with SCSS

So responsive images are BRILLIANT with Bootstraps handy html class

.img-fluid

I also use EWWW for optimizing my images on Wordpress and converting images to WEBP.

However I wanted my background images to use have the same proportions whilst working responsively.

I used the below mixin and it has changed my life. Give it try.

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: cover;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
  position: relative;
}