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:
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).
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! 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.
Latest posts by Matt Watson (see all)
- Reblog: Responsive Web Design (RWD) Background Images - July 28, 2017
- WordCamp Edinburgh July 2017 - July 26, 2017
- Changing your WordPress site language (locale) dynamically - June 16, 2017