Posts

CSS background-position not working on Android Mozilla

In order to position a background image inside a div I tried to use the CSS3:

background-position: right 10px center;

The goal was to position the background image to the right of a div container, 10px from the right edge and vertically centered. This worked fine in most browsers. However, in the Android devices using the native Mozilla browser the background was positioned at 0,0 (i.e. left top).

The solution was to use:

background-position: right center;

and edit the background image where I added 10 px of extra transparent space into the image.