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.6 Safari 1.0 Opera 7.50
Default


Test page
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
The most interesting question is whether the order of the keywords matters.
Two pixel values
"20px 50px" or "50px 20px"

Test page
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
The first value is the horizontal one (left).
Keyword + percentages
"bottom 50%" or "50% bottom" or "right 50%" or "50% right"

Test page
Yes Yes Yes No Incomplete No
Safari: If keyword comes last it's interpreted as "center"
Pixels + percentages
"20px 50%" or "50% 20px"

Test page
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
Yes Yes Yes No Incomplete No
Safari: If keyword comes last it's interpreted as "center"