Centred custom size header image

[Apologies for posting on this topic again, but I want to clarify the problem, and I couldn’t see a way to delete my previous post]

I’m trying to display a custom header image in Illustratr. The suggested dimensions for header images are 1100 x 250. Up until now, I’ve been using a different image size (250 square), because I only want the header to display a central image. When viewed on mobiles/tablets, the image then centres and fills the screen width, and displays fine.

However, I’ve recently upgraded to a retina display, and I notice that the header image is now blurry. I tried uploading a double size image (500 square), but this just results in a bigger, blurry image. However, if I upload an image that’s twice the recommended header size (i.e. 2200 x 500), then it works fine. The problem with this is that, when viewed on a phone or tablet, the header is too small.

I’ve been searching and searching for any solutions, but haven’t been able to find any. Basically, I want to know:

(1) Is there a way to display a centred, square header image without it resulting in blurriness on retina displays?
Or
(2) Is there a way to display different headers on desktop/phone/tablet.

Any help is greatly appreciated.

The page I need help with: [log in to see the link]