You would replace the comment line
/* Style adjustments for high resolution devices */
with your background and background size rules.
Regarding which media query solution to use, I threw a lot of information at you in all of those links. :) Keep in mind that the examples we're talking about for setting retina images using CSS are currently being discussed and evolved by web designers around the world—so there's not necessarily one definitive answer for how to do it. What you should do is look over the examples, test them, and then decide which works best for your target audience.
Looking back at the example I posted on Jul 9, I think it should work. I did a little extra digging, and I found that there's an issue reported where "WebKit on Retina iPads will downscale the image and then upscale it again, leading to a significantly uglier image." The workaround is to save JPG images in progressive mode or a PNG should work. For details, see http://www.quora.com/CSS3/What-is-the-best-method-for-adding-2x-images-to-webpages-that-will-be-displayed-on-the-new-iPad-with-Retina-graphics
I see you're using PNG though, and it seems that should be good, but it made me wonder if the problem could possible be with the type of PNG you saved (this is kind of a wild guess). Would you be willing to try the Jul 9 solution with a progressive JPG?
In addition, I researched the issue you reported where the built in custom header image upload didn't work by default. I found that if the theme you are using supports flexible header images, then it will work as long as you select the "Skip Cropping, Publish Image as Is" option on step two in the Appearance → Header page (it only appears if the theme supports flexible headers). If your theme doesn't support flexible header images yet, then you need to use a CSS solution. Here is a list of which themes currently have flexible header image support: