html - background image rendering issue -

I have some problems with background on some mobile phones. <

Style for that div Is:

  #navpanel {background: url ('images / bg04.jpg'); Box-Shadow: Inset-1px 0px 0px 0px rgba (255,255,255,0.25), Inset -2px 0px 25px 0px rgba (0,0,0,0,5,5); Text-shadow: -1px -1px 1px RGBA (0,0,0,1); }  

It looks like a friend on iPhone 6 who looks like this:

And when it renders on my iPhone 5S the background image gets distorted:

Any idea why the background image will present this way? What does it have to do with the device's pixel density?

Sorry for the big images.

I have created a quick bella and it is rendered as desired

I do not understand why it looks different, because I believe that both devices have retina displays anyway, you can target retinal screens and You can use the media query to provide a high-res background image.

You currently have the image bg04.jpg 150x150, you need to find / create a high-RAV version.

  @ Media only screen and (-webkit-min-device-pixel-ratio: 2), screen only and (minimum-resolution: 1 9 2 dpi) {#navPanel {background-image : Url ('images/bg04@2x.jpg'); / * This image is 300x300 * / Background size: 150px must be 150px; }}  

Or try it in a hurry, but the pattern will look a bit different.

  @ Media only screen and (-bbkit-min-device-pixel-ratio: 2), screen only and (min-resolution: 1 9 2 dpi) {#navPanel {background-image : Url ('images / bg04.jpg'); / * Current 150x150 * / Background size: 75px 75px; / * Half *}}