Some updates to exist­ing back­ground prop­er­ties have landed in browsers since the pub­lic­a­tion of the book.

The background-position prop­erty now accepts up to four val­ues to give more flex­ib­il­ity in pos­i­tion­ing. Previously all pos­i­tion­ing was meas­ured from the top left corner, but with the updated syn­tax you can change that by using a keyword before each value; for example, to pos­i­tion the back­ground image 20px from the right and 10px from the bot­tom, you would use this:

e { background-position: right 20px bottom 10px; }

You can also use three val­ues, which must be in the format keyword-keyword-length or keyword-length-keyword:

e { background-position: left top 20px; }
f { background-position: left 20px top; }

This is equi­val­ent to:

e { background-position: left 0 top 20px; }

You can see a few examples of this in Figure 8–12 — as I write this, only Opera, IE9 and Firefox Nightly will dis­play this correctly.

The other change is to the background-repeat prop­erty. This now accepts two val­ues, which are equi­val­ent to background-repeat-x and background-repeat-y:

e { background-repeat: repeat no-repeat; }

This is demon­strated in Figure 8–13, but although Firefox 13 should have sup­port for this syn­tax, these examples use the background-repeat val­ues space and round so as of this writ­ing you’ll need Opera or IE9 to view them.

The browser sup­port tables in Chapter 8 have been updated to show these changes.

— 28 February, 2012