Background-Origin

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 may 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; }
.ss64class { background-origin: padding-box; }

#SS64id { 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-Image - The background image for an element.
Background-Repeat - How a background image will be repeated.


© Copyright SS64.com 1999-2014
Some rights reserved