CSS background-origin Property

The background-origin property determines the background positioning area, that is the position of the origin of an image (the top-left corner of the image is its origin) specified using the background-image CSS property.

You should keep in mind that if the background-attachment value is set to fixed, the value of the background-origin property will be ignored.

The initial value of background-origin property is padding-box. You can apply it to all elements. It also applies to ::first-letter and ::first-line. This property is neither inheritable nor animatable. The transition between different values will be sudden.

Syntax

This is the formal syntax for using background-origin property —

background-origin: <box> [ , <box> ]*    

/* where */
<box> = padding-box | border-box | content-box

Here are some examples of using this property —

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

Acceptable Values

padding-box

In this case, the image is positioned relative to the padding box of the element. In other words, the origin of the image at is positioned at the top left corner of the padding box.

border-box

In this case, the image is positioned relative to the border box of the element.

content-box

In this case, the image is positioned relative to the content box.

Examples

See the Pen CSS background-origin Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS3 background-image options property (or properties like background-clip, background-origin and background-size that affect background images) is fully supported in 93.3% browsers and partially supported in 4.49% browsers. Therefore, its overall browser support is 97.79%.

This property is partially supported in Firefox 3.6+, Chrome 4+, Safari 4+, Opera 10.0-10.1+, iOS Safari 3.2+ and Android 3+. This property is fully supported in IE 9+, Edge 12+, Firefox 4+, Chrome 15+, Safari 7+, Opera 11+, iOS Safari 8+, Android 53+ and Chrome for Android 55+.

  • Safari also supports the unofficial -webkit-background-clip: text (only with prefix).
  • iOS Safari has buggy behavior with background-size: cover; on a page’s body.
  • iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;.
  • Safari (OS X and iOS) and Chrome do not support background-size: 100% px; in combination with SVG images, it leaves them at the original size while other browsers stretch the vector image correctly while leaving the height at the specified number of pixels.
  • Android 4.3 browser and below are reported to not support percentages in background-size.

The browser stats and issues were taken from caniuse.com

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top