I’m building a responsive WordPress site, based on the work already done by the team on Twenty Thirteen, for work. I ran into a bit of an issue though when my masthead image worked fine on desktop browsers, but was broken in mobile browsers. It was like the image was too large or too small for the div I was positioning it in on some devices.
Well, turns out it was caused by a difference in size between physical pixels and CSS pixels on the device. My header and divs all had positions and sizes defined in CSS pixels and were sitting atop this background image. However the image was being sized based on physical pixels. With the mismatch that occurred, the elements no longer lined up properly. The solution was simple enough however: just add a background-size declaration that set the background image’s size in CSS pixels explicitly.
