background-position

No serious browser problems, just a few minor things.

This page discusses the correct syntax for background-position. There are very few browser incompatibilities, so this page is something of an exception on my site.

The background-position declaration (surprise!) tells the browser where to position a background image. The property accepts three kinds of values: keywords, pixels and percentages, values that may be mixed.

The only incompatibility problem is that Mozilla 1.6 and Opera 7.50 refuse to honour a combination of a keyword value and a pixel or percentage value. Explorer and Safari have no problems with these combinations.

When you use only pixels and percentages, the first value denotes the left position, the second one the top position.

Compatibility table

See also the key to my compatibility tables.

Units Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.7.12 Safari 1.3.2 Opera 8.5 iCab 3.0
Default


Test page 		Yes Yes Yes Yes Yes Yes Yes
The default background-position is the upper left corner of the element.
Two keywords
"bottom right" or "right bottom"

Test page 		Yes Yes Yes Yes Yes Yes Yes
The order of the keywords does not matter; all browsers interpret both correctly.
Two pixel values
"20px 50px" or "50px 20px"

Test page 		Yes Yes Yes Yes Yes Yes Yes
The first value is the horizontal one (left).
Two percentual values
"20% 50%" or "50% 20%"

Test page 		Yes Yes Yes Yes Yes Yes Yes
The first value is the horizontal one (left).
Keyword + percentages
"bottom 50%" or "50% bottom" or "right 50%" or "50% right"

Test page 		Almost Almost Almost Yes Almost Yes Yes
Mozilla and Opera interpret the first value as the x-coordinate, the second as the y-coordinate. If they get an incorrect keyword ("bottom" where an x-coordinate is expected, for instance), they position the background image in the top left corner.
The only possible combinations are therefore
"[left | right] [N% | Npx]"
"[N% | Npx] [top | bottom]"
Pixels + percentages
"20px 50%" or "50% 20px"

Test page 		Yes Yes Yes Yes Yes Yes Yes
The first value is the horizontal one (left).
Keyword + pixels
"bottom 20px" or "20px bottom" or "right 20px" or "20px right"

Test page 		Almost Almost Almost Yes Almost Yes Yes
See Keyword + percentages.

Firefox note

Firefox 1.0 partially supports the Keywords+percentages and Keywords+pixels value pairs. However, it still requires to get the horizontal coordinate first, then the vertical. Explorer doesn't require this order, it automatically interprets the two values correctly.