Reblog: Responsive Web Design (RWD) Background Images

Responsive Background Image Example on CodePen

Responsive Background Images with WordPress

Link

I work with Dave Green on a daily basis at our WordPress focused web development agency Make Do. Responsive Web Design (RWD) is a service that comes as standard with all of our products.

Dave has wrote an excellent article on how to implement responsive images for background Images, with the upshot of increasing page load time.

Responsive Images on any Website

Dave’s article focuses on implementing responsive images within WordPress, but the example Code Pen Dave has created can work with any website.

Here is a fork of Dave’s original Pen:

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 article he provides 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).

You can find out more about Responsive Images for WordPress over on Dave’s original blog article.

Implement RWD Background Images within your WordPress Project

Want to use this functionality in your WordPress project, along with a whole host of additional features? Why not checkout the Kapow! WordPress Boilerplate by Make Do? It is fully modular, and the clickjacking snippet comes as part of the Kapow Theme part of the framework.

Kapow! Logo

Kapow!

Kapow! can be used to provide a full VVV powered development workflow, but feel free to use just the parts that you need. If you need support in using the framework just get in touch.

Matt Watson

Technical Lead at Make Do
Matt Watson is the co-founder and technical lead of WordPress agency Make Do. Matt loves writing and learning about code, and considers himself lucky to be doing what he loves for a living. Find out more about Matt, or get in touch to hire Matt for your project.

Leave a Reply