CSS3 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 {
    background: #d78965;
    border: solid 1px white;
    -webkit-background-origin: content-box;
    -moz-background-origin: content-box;
    -o-background-origin: content-box;
    -ms-background-origin: content-box;
    background-clip: content-box; /* padding box, border-box */
    padding: 30px;
}

Live Demonstration

This element's background originates in the content area.

Desktop Browser Support

IE9+, Firefox 4+, Chrome 4+, Safari 3+, Opera 10.5+

Tools / Polyfills

Tutorials / Articles

Fork me on GitHub