Aligning Background Images with Borders and Paddings

Ensuring a pixel-precise design

When you use background images with elements that have paddings and borders, there are a few issues that should be considered. Sometimes you need a pixel-precise design, and it does matter how your background image is aligned to its context. With the background-origin property, you can specify whether an image is aligned with the full box containing the border and paddings around the context (border-box), or with the padding (padding-box, this is the default).

If you need to, you can align the image with the content (content-box). An example of each setting is shown in the figure below. The background image is the bordered square with a filled circle within. In the figure, you can observe, how the top-left corner of the square is aligned with the boxes, depending on the value of background-origin.