DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Ashley Armstrong
Ashley Armstrong

Posted on

Responsive Background Images Mixin with SCSS

So responsive images are BRILLIANT with Bootstraps handy html class

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌚 Life is too short to browse without dark mode