TUDOR ANGHELINA

Many new devices have double the pixel density of old devices. So you can use images twice in size for your websites background or content, in order to obtain a better looking design.

The best and easiest way is to use two background images, as shown in the image above, and display the correct image using CSS3 media queries.
Using this method the right image will be sued as the background image depending on weather the device is equipped with a retina screen or not.

Here is the code:

 

You will have your regular CSS declaration of the body background image:

body{
    background: url ('background-image.png') repeat;
}

At the end of your CSS stylesheet you can then use this code:

@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) {
 body{
      background: url ('background-image@2x.png') repeat;
 }
}

Please leave your questions or suggestions below.