CSS background-origin

The background-origin CSS property sets the reference for the background position, which is in turn set using the background-position property. The background images/gradients of an element are placed relative to the padding-box (edges of the padding area, excluding the border) by default. background-origin allows positioning relative to the border-box or content-box.

background-origin: padding-box|border-box|content-box
background-origin: content-box;
background-origin: content-box, padding-box;   /* two images, different origins */

To set the origin for several background images, comma separate values in the order given by the background-image list.

Browser Support: Full

background-origin and background-position

background-origin is used alongside background-position most of the time. The latter normally takes two values which give the horizontal and vertical positions respectively. The content-box value of background-origin will make the position be relative to the content area, excluding the padding.

.example {
background-color: #84D251; background-image: url('soccer.png'); background-repeat: no-repeat; padding: 30px; background-position: right 30px bottom 0%; background-origin: content-box;
}

Note that the background image and color still paint the padding area. The background-clip property is the one used to change this area.

padding-box vs. content-box

The positioning box names refer to the outer edge of each: the padding-box reaches the edges of the padding area, border-box includes the border area (behind any border) and content-box excludes padding and border.

padding-box
content-box

There's no way to paint or position the background relative to the margin area.

background-origin + background-clip

background-clip allows extending the background all the way to the border edges, or limiting it to the content box. When doing so, it is often desirable to position the background relative to the same edge.

.example {
padding: 30px; background-color: #4c9ee3; background-image: url('duck.png'); background-repeat: no-repeat; background-position: left bottom; background-clip: content-box; background-origin: content-box;
}

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>