background-origin property - Script Tutorials

Contents

Definition and Usage
Syntax
Values
Examples
Compatibility
Desktop browsers
Mobile browsers

Definition and Usage

The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.

Note that background-origin is ignored when background-attachment is fixed.

If the value of this property is not set in a background shorthand property that is applied to the element after the background-origin CSS property, the value of this property is then reset to its initial value by the shorthand property.

Initialpadding-box
Applies toall elements
Inheritedno
Mediavisual
Computed Valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <box>#

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

Values

border-box: The background extends to the outside edge of the border (but underneath the border in z-ordering).
padding-box: No background is drawn below the border (background extends to the outside edge of the padding).
content-box: The background is painted within (clipped to) the content box.

Examples

.example { 
  
   border: 10px double; 
  
   padding: 10px; 
  
   background: url('image.jpg'); 
  
   background-position: center left; 
  
   /* The background will be inside the padding */ 
  
   background-origin: content-box; 
  
}

div { 
  
  background-image: url('logo.jpg'), url('mainback.png'); 
  
  background-position: top right, 0px 0px; 
  
  background-origin: content-box, padding-box; 
  
}