0
.icon { 
    background: #F0F0F0 url('../images/assets/user.png') no-repeat center left 10px; 
    background-size: 24px 24px;
    -webkit-background-size: 24px 24px;  
}

The above CSS works fine in all of the major browsers, but when I view it on any mobile device (HTC, Sony Ericson, Samsung, iPhone etc) the background CSS does not display, not even the color of the background. However, when I remove the 10px in the background-position style - it all works.

I have tried replacing 10px with em and % but it doesn't help the case. Any thoughts or suggestions?

Dave Cameron
  • 159
  • 1
  • 3
  • 16

1 Answers1

0

The background property can only take a horizontal and vertical position—in your case center andd 10px—but you have specified three position values. This is why it works when you remove the third value.

JoeJ
  • 920
  • 1
  • 6
  • 17
  • It works with the third value in browsers on computer, but not browsers on mobile ... for some reason. What the third value (10px) does is to offset the position vertically. – Dave Cameron Dec 27 '13 at 00:00
  • Yes, because you have already set two horizontal values (center and left) which are conflicting. You can only use either `center 10px` or `left 10px`. – JoeJ Dec 27 '13 at 00:02