Code Editor
Web Browser
Learn

When a background image is not repeated, its position can be modified with the background-position property.

p { background-image: url("#"); background-repeat: no-repeat; background-position: right center; }

A background image is positioned using a 3 by 3 grid (three rows, three columns), meaning there are 9 total possible positions for the image:

  1. left top - top left corner of the element's box.
  2. center top - top center of the element's box.
  3. right top - top right corner of the element's box.
  4. left center - left column, center row.
  5. center center - the center of the element's box.
  6. right center - right column, center row.
  7. left bottom - bottom left corner of the element's box.
  8. center bottom - bottom center of the element's box.
  9. right bottom - bottom right corner of the element's box.

Note that the values are in pairs.

p { background-image: url("#"); background-repeat: no-repeat; background-position: right top; }

In the example above, the background image is not repeated. It's positioned in the top right corner of the element's box.

Note: When setting this property, if only one value is specified, the second value will default to center.

Report a Bug
If you see a bug or any other issue with this page, please report it here.