Create background image for retina and non-retina displays

Question

Situation

A HTML page background image should be displayed in a fixed position, filling the whole screen or window (on non-tablet, non-smartphone devices).

The background image is created using ImageShack. No problems with this so far.

I have created a Plunk to demonstrate current progress.

Problem

On a non-retina device (a Dell Notebook), the image seems to be rendered ok, filling the whole background of the page.

On my iPhone (retina) the image is definitively not shown as a high-resolution image.

My current solution

The JavaScript code used in this example is this:

function isRetina() {
  return window.devicePixelRatio > 1;
}

$(document).ready(function() {
  var url = "http://farm8.staticflickr.com/7398/11622056325_08e35bd803_o_d.jpg";
  var b = $('body'), w = $(window), width = w.innerWidth(), height = w.innerHeight();
  $('#retina').text('Is ' + (isRetina() ? '' : 'not') + ' retina.');
  $('#size').text(width + " x " + height);
  b.css('background-image'
    , 'url(http://imagizer.imageshack.us/' 
      + width 
      + 'x' 
      + height 
      + 'f0/' 
      + url 
      + ')');
  if (isRetina()) {
    b.css('background-size', (width / 2) + 'px ' + (height / 2) + 'px');
  }
});

Questions

1. Which CSS settings should be used to set a high-resolution "retina" background image?
2. How can I create a background image filling the whole (visible) screen on an iPhone?

Update: my solution

Although mcmac's answer brought some insight, it wasn't quite the answer I was looking for. I just wanted to understand how to set the parameters of a background image in order to display a high-res image on a retina screen.

The solution is quite simple.

a) Using background-size

When using background-size, the actual image has to have twice the size of the screen (in each direction) and the background-size property has to have the size of the screen (in contrast to what I did: half the size of the screen):

b.css('background-image', 'url(http://my.image.url.com/size' + (width * 2) + 'x' + (height * 2) + ')');
b.css('background-size', width + 'px ' + height + 'px');

b) Using a fixed image

As R3tep suggested, instead of a background image, I could just use a normal fixed image. In that case, the size of the image must be - again - double the size of the image on screen, and the css must be height: 100%; width: 100%.

Answer 1

you don't need js for that, you can use css Media queries for retina:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

  /* Retina-specific stuff here */

}

Media queries for iphone and ipad example