Responsive Drupal Backgrounds with Picture Background Formatter

Submitted by Johnny Martin on Tue, 10/27/2015 - 17:42

With the advent of Responsive Web Design came Responsive Images, and its champion, the Picture element. Using Picture, we can create an unlimited amount of image sizes that properly fits our browser viewport. But what about background images? Of course we can painstakenly save out multiple versions of the image with different sizes, and create CSS media queries to display those versions by hand, but who wants to do that while running a CMS like Drupal?

Enter Picture Background Formatter. It combines a module like Background Images Formatter, but outputs multiple image styles like Picture. Simply change the formatter on the image field to Picture Background Formatter, choose a Picture mapping, and add a CSS selector to output your image as a background on the node page.

It's still a work in progress, but it's been solving a lot of my issues lately.