Problem displaying background image

Question

I am having some background problems on some mobile phones.

style for this div:

#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);
    text-shadow: -1px -1px 1px rgba(0,0,0,1);
}

this is fine drawn by friends of the iPhone 6, which looks like this:

and when it displays on my iPhone 5s, the background image is distorted:

Any ideas why the background image would look like this? Is this due to the pixel density of the device?

Sorry for the large images.

ufc-info.com

I did a quick fiddle and rendering as desired.

Fiddle

Answer 1

, -, , . , - -res.

bg04.jpg 150x150, / -Res.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
    #navPanel {
        background-image: url('images/[e-mail]'); /* this image should be 300x300 */
        background-size: 150px 150px;
    }
}

, .

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
    #navPanel {
        background-image: url('images/bg04.jpg'); /* current one 150x150 */
        background-size: 75px 75px; /* half */
    }
}