The positioning area of a background image.
Syntax
background-origin: border-box | padding-box | content-box ;
border-box The background image fills the border box.
padding-box The background image fills the padding box.
content-box. The background image fills the content box.
When set to border-box then the edges of the image can be hidden underneath the border.
padding-box is the default.
New in CSS3 is the ability to specify multiple background images. You can (optionally) specify the background-origin for multiple images as a comma-separated list, these will then be applied (in order) to each of the images specified by background-image.
Examples:
h1 { background-origin: border-box; }
.emw3class { background-origin: padding-box; }
#emw3id { background-origin: content-box; }
Try it:
This is a sample of text with a CSS background image. By default the background image fills the padding box. |
(CSS3+) Browser Support: IE9+, Firefox 4+, Opera, and Safari 5+.
“Fantasy, abandoned by reason, produces impossible monsters; united with it, she is the mother of the arts and the origin of marvels” ~ Goya quotes (Spanish artist)
Related:
Background-Origin - MDN Web Docs.
Background-Image - The background image for an element.
Background-Repeat - How a background image will be repeated.