background image rendering issue

Question

I'm having some issues with the background on certain mobile phones.

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

it is rendering fine on a friends iPhone 6 which looks like this:

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

Any ideas why the background image would render this way? Does it have to do with the device's pixel density?

Sorry for the large images.

ufc-info.com

I made a quick fiddle and it is rendering as desired.

Fiddle

Answer 1

I don't understand why it looks different, as I believe both devices have retina display. Anyway, you can use media query to target retina screens and supply a hi-res background image.

You current image bg04.jpg is 150x150, you need to find/create a hi-res version of it.

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

Or quick try it like this, but the pattern will look slightly different.

@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 */
    }
}