Background image/position rendering differently on iPad

Question

I have a div which has one of two background positions for a sprite background image depending on the class set for the div in a php script.

The CSS, which is below, works fine on standard browsers, but on the iPad I am not seeing the same. Instead I see more of the background image than I want to. As you can see from the image below, rather than just seeing one star, I am seeing part of another star too.

How can I get the background position/image looking right on the iPad?

.normal, .favourite {
    width:18px;
    height:17px;
    margin-right: 4px;
    border:none;
    cursor: pointer;
    display:inline-block;
    vertical-align: middle;
    background-color:transparent;
    background-repeat: no-repeat;
}

.normal {
    background-image: url('/images/playlist_sprite.png');
    background-position: left bottom;
}

.favourite {
    background-image:url('/images/playlist_sprite.png');
    background-position: right bottom;
}

enter image description here

Try this css property `background-size: 100% 100%;` in `.normal, .favourite {}` and let me know. Thanks! — Ahsan Khurshid, Aug 15 '12 at 10:25
This just shows the whole sprite image, reducing it to fit in 18px by 17px — Nick, Aug 15 '12 at 12:05

score 0 · Answer 1 · answered Aug 15 '12 at 11:35

0

Rather than defining the background position using left/right/bottom try defining it exactly using pixels.

e.g.

background-position: XXpx XXpx;

Also, make sure that both those images in your sprite are exactly 18px by 17px as that is what the class is saying the image size will be.

answered Aug 15 '12 at 11:35

Billy Moat

20,792
7
45
37

Thanks. I tried doing this, i.e. background-position: 0px 17px; for .normal and background-position: 18px 17px; for .favourite and then no background image shows at all (on both iPad and normal browsers), which is rather strange. An image only shows if I use top, bottom, left, right, etc. What could be the cause of this? Both the images in the sprite are exactly 18px by 17px. – Nick Aug 15 '12 at 11:59
Can you provide a link to your page or create a fiddle? – Billy Moat Aug 15 '12 at 12:00
I'll create a fiddle and report back as my site is behind a login – Nick Aug 15 '12 at 12:05
Mmmh. It looks fine on the [fiddle](http://jsfiddle.net/nickharambee/dKAYz/). I presume that it must be some other CSS on the page interfering with the CSS for the stars when using the iPad. – Nick Aug 15 '12 at 12:26
Does it look okay on the fiddle on the iPad? – Billy Moat Aug 15 '12 at 13:47
Yes it does. Which suggests the CSS conflict to me. Also using pixels for background-position should work, but doesn't. – Nick Aug 15 '12 at 13:55
Ah well, not much more we can do unless you can let us see the whole page I guess. – Billy Moat Aug 15 '12 at 14:01

Background image/position rendering differently on iPad

1 Answers1