Frequently Asked Question

Images for iPhone 4 Retina display, sharp and crystal clear

Images in the app looks great on iPhone 3G generations, but is missing the crystal sharpness on the iPhone 4 retina display.

 
Here is how to make your images look Crystal clear on retina display:
 
Inserted the bellow code in your HTML page:
 

<metaname="viewport"content="width=device-width, initial-scale=1.0, 

maximum-scale=1.0, user-scalable=no">

 

 

<styletype="text/css">

  

  #someDiv 

  {

    background-image: url(samplebg.png);

    background-repeat: repeat;

    width: 190px;

    height: 142px;

    

  }

  

  @media only screen and (-webkit-min-device-pixel-ratio: 2)

    {

    #someDiv 

    { background-image: url('/samplebg2x.png');

      -webkit-background-size:190px 142px;  

      background-repeat: repeat;

    }

  }

</style>

 

 

<divid="someDiv"style="width: 100%; min-height: 380px; 

text-align: center; padding-top:150px; "align="center">

  

  <divstyle="background-color:#ffffff; color:#000000;">

Sample design for iPhone 4</div>

  

</div>

 
 
 
To create a good design for both devices you need to create two different images with different size and resolution:
1. one for iPhone that support retina display
2. the same image, but scaled-down/2 for iPhone 3G generation
 
 
In above sample code I used a seamless background pattern with 380px x 283px size. I named it samplebg2x.png (the prefix 2x is used for a convenience for retina display images). 
After that the same image was scaled down/2 to 190px x142px and I named it samplebg.png I will use it for iPhone 3G generation.
 
To have a page with a background image, I implemented a CSS class uploading samplebg.png image with 190px x142px size, this class works for 3G iPhone generation:
 

#someDiv 

  {

    background-image: url(samplebg.png);

    background-repeat: repeat;

    width: 190px;

    height: 142px;

    

  }

 

 
We can observe that the background-image on iPhone with retina display looks blurry.

For this reason I added a new CSS class, using like background-image the samplebg2x.png with 380px x 283px size, but we need to set this size in CSS style scaled-down (i.e 190px x 142px).

 

 

@media only screen and (-webkit-min-device-pixel-ratio: 2)

    {

    #someDiv 

    { background-image: url('/samplebg2x.png');

      -webkit-background-size:190px 142px;  

      background-repeat: repeat;

    }

  }