CSS Click Chart

Background Origin

Similar to background-clip, defines how far the background of the element should visibly extend (i.e. where its extremities originate).

Specification

Background Origin on W3C

Example Code

.element {
  border: 16px solid rgba(23, 23, 23, .5);
  background: url(images/bg-1.png) no-repeat center;
  background-origin: content-box;
  background-size: cover;
  padding: 16px;
}

Live Demonstration

This element's background originates in the content area.

Browser Support

Can I Use background-img-opts? Data on support for the background-origin feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles