Positioning the background relative to different borders

One interesting feature of background-position, which we have not mentioned yet, is that the position of the background can be set relative to any corner of the block, not just from the top left.

To specify the particular border from which to determine the background location, you need to specify one of the following keywords in front of the value for the coordinates: top, right, bottom, or left. For example:

/* By default, the coordinates are set for the upper left corner */
background-position: 10px 50px; /* 10px to the left, 50px up */

background-position: right 30px bottom 60px; /* 30px to the right, 60px down */
background-position: left 50px bottom 10px; /* 50px to the left, 10px down */
background-position: right 40px top 30px; /* 40px to the right, 30px up */

Modern browsers offer almost total support for these background-position property values.

Let’s add a fancy monocle and mustache for Monsieur Muffin, and position this image relative to the bottom right corner.