CSS: Safari Mobile doesn't support background-position offset

Question

I have this property with multiple background images and their respective positions:

#my_div {
    background-image:url("..."), url("..."), url("...");
    background-position:right bottom, right bottom, right 15px top 17px;
}

The positioning for the third image works fine on FF, IE10, Chrome.. but unfortunately not on Safari Mobile. It renders the right and top thing but not the offsets (15px for right and 17px for top).. I couldn't find any reference on this. How would you deal with this? I'd avoid having to modify the image manually adding transparent borders to make the offset.

Answer 1

Mobile Safari (as well as the Android browser) doesn't support the four-value syntax yet. (see the MDN article on background-position).

One possible workaround would be to extract the background image which should have the offset and put it in a pseudo element that has the corresponding offsets.

#my_div:before{
  content: '';
  display: block;
  position: absolute;
  z-index: -1;

  height: 50px; /* Height of your image / parent div */
  width: 50px; /* Width of your image / parent div */

  /* Your offset */
  top: 17px; 
  right: 15px;

  background-image: url("...");
  background-position: right top;
}

For easier understanding I created a jsFiddle: http://jsfiddle.net/pKWvp/1/

Answer 2

You could also try using the css calc function: http://briantree.se/quick-tip-02-use-css-calc-properly-position-background-images/

It's might be easier/cleaner than using pseudo elements.