1

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%.

Community
  • 1
  • 1
Moritz Petersen
  • 12,902
  • 3
  • 38
  • 45
  • [this](http://stackoverflow.com/a/20372022/542251) seems to address the first part of this question? – Liam Feb 03 '14 at 14:05
  • 1
    An `img` tag with `position: fixed`, `z-index: 0` and `width: 100%` is not a solution? – R3tep Feb 03 '14 at 14:21
  • @Liam detecting the retina display works on my machines. It's just not clear how to actually use the high-res image and which css I should use. – Moritz Petersen Feb 03 '14 at 14:42

1 Answers1

5

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

mcmac
  • 1,042
  • 9
  • 13
  • Could you please explain a bit more? My problem is, that I want to create a background image in exact the size of the current screen (window). I need JavaScript to get the image in the right size. The problem is now, that it is not clear to me if I should get the image in the double size of the screen for retina displays or if I should use this `background-size` style. – Moritz Petersen Feb 03 '14 at 14:39
  • look if you want create background on a full size window you have two ways: first use background cover second use jquery. If you want create better background for retina display you must use double size background. Now if your website is only for modern browser you can use first way, but if you need support for ie and old browser you must add jquery script this link will be helpful for you check this http://css-tricks.com/perfect-full-page-background-image/ – mcmac Feb 03 '14 at 14:48
  • But with the first solution (background cover) always a very large image is loaded, right? With jQuery (e.g. my code above), the image is already scaled to the right dimension. – Moritz Petersen Feb 03 '14 at 14:53
  • no first you use a normal file for normal display, and you adding style for retina, inside you set new background file in double size only for retina displays this is correct way. This is solution for first way – mcmac Feb 03 '14 at 14:56
  • But that means that a retina iPhone has to download always two images, the low-res first and then the high-res? – Moritz Petersen Feb 03 '14 at 15:26
  • 1
    no look if you preparing style for a mobile, first what you do is declare images for retina display. Nice example is a style for bootstrap look on that http://getbootstrap.com/css/#grid philosophy is simple mobile first. So when you write css first for a mobile, second tablets and last desktop your browser check what is your current resolution and dpi and give you style for this. This is exactly the same like use function in jquery. First you write function and instruction, after you can use this function – mcmac Feb 03 '14 at 16:36