Responsive Web Design (RWD) is a service that comes as standard with all the products that I develop, and the method created by Dave Green is an excellent way to make sure that your background images adhere to the same responsive rules as your embedded images.
Responsive Images on any Website
The following method focuses on implementing responsive images within WordPress, but the example Code Pen Dave has created can work with any website. Here is a fork:
This is a JavaScript based solution, that has dependencies on Modernizr and jQuery, however it could easily be reworked to be a native solution.
Because of the usage of JavaScript this means that your background images wont show if you do not have JavaScript enabled. However from an accessibility perspective, background images are for decoration only, so just ensure that you have a suitable fallback in place in your CSS (such as a solid colour or gradient). Avoid using an image as a fallback, as the image will load before the responsive script, which kind of defeats the point.
Responsive Images with WordPress
In Dave’s (now removed) article he provided some great Gists that show how you can create functions for WordPress that will do all of the heavy lifting for you. I have made a fork of the RWD Background Image Gists here (because I fully intend tinkering with the code).