When I was writing The Principles of Beautiful Web Design, I had no idea that the section with the most overlooked typos and errors would be the segment on background positioning. Backgrounds are such an integral part of what I do that I neglected to test what I was writing. However, I knew all along that there is some trickiness to the CSS background-position description, specifically when you start mixing keyword values (
top, bottom, left, right, and
center) with numeric or percentage values.
The main problem is that the keyword values are to be declared with the vertical value first and then the horizontal (ie,
bottom right). With numeric and percentage positioning, you declare them the opposite; horizontal value first and then the vertical. This creates some confusion when you want to do something funky like specify a pixel value for the horizontal position of a bottom aligned background. Do you say
bottom 100px or
100px bottom? It would be nice if the browser made the assumption that if you declare an explicitly vertical keyword like
bottom, then the other value is horizontal. Safari and IE make this assumption, but Firefox and Opera will only accept one order. If you get the order wrong, the browser will give up on positioning the background altogether and place your background in the default
top left corner.
How nice. To avoid this problem, and for the sake of consistency (and sanity) you should always declare the horizontal value first and then the vertical. Even if you are using only keywords,
bottom center and
center bottom both render the same way, and even though the W3Schools says the former is correct, they both validate.
To figure all this out, I set up a page with 24 different combinations of background-position values containing
bottom, right, center, 100px, and
80%. I left out
left because either of these could be specified simply as
0 which would eliminate the need to mix keywords with numeric values alltogether.