Dealing with high resolution images

I'm in the process of developing a simple iphone/android web app using pho开发者_如何学Gonegap and I'm having difficulty providing high resolution images for newer android devices. I'm assuming that I can use the same ones I created for the iphone 4. These are kept in a separate css file and are controlled by the media query below:

media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)"

Inside are a bunch of css rules like:

.homepage-list li.about { background-image: url(../images/info@2x.png); -webkit-background-size: 35px 35px; }

Both the android emulator and a real android device (HTC Desire HD) just won't display those images but an iphone 4 does. Oddly enough, if I modify the above rule and add a border then that border is shown. So the media query is being understood as far as I can tell.

I'm a bit stumped for ideas. Can anyone help?

Thanks in advance!

Are you able to display other images in the same folder?

Try to rename the image and don't include any "strange" characters like @