So I built a wordpress site for my company, I made them a template for creating parallax areas. Everything was working perfectly but then…. dun dun dun! The request came in to upload a mobile version of the image.

Normally this wouldn’t be an issue, but the problem lies that I was creating the section with inline style of the background image.

I tried doing some javascript checks and that worked perfectly when the page loaded for the first time. The resize function created all sorts of a mess!

The solution creating a media query and inserting my php variables of the background images, so before each section i am adding some styling and that was my non elegant solution. But one that works!!!

Here is link to the work in progress… wordpress parallax template