Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

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.