CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS3 background-origin Property

Topic: CSS3 Properties ReferencePrev|Next

Description

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

The following table summarizes the usages context and the version history of this property.

Default value: padding-box
Applies to:
All elements. It also applies to ::first-letter and ::first-line.
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

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

The example below shows the background-origin property in action.

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    background-origin: content-box;
}

Note: The background-origin property is ignored if the value of background-attachment property is specified as fixed.


Property Values

The following table describes the values of this property.

Value Description
border-box Specifies that the background extends to the outside edge of the border. Background is drawn below the border.
padding-box Specifies that the background extends to the outside edge of the padding. No background is drawn below the border. This is default value.
content-box Specifies that the background is painted within (clipped to) the content box only. No background is drawn below the border and padding area.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element background-origin property.

Browser Compatibility

The background-origin property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 4+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Safari 3+
  • Opera 10.5+

Further Reading

See tutorial on: CSS3 Background, CSS3 Background.

Related properties: background, background-attachment, background-color, background-image, background-clip, background-position, background-repeat, background-size.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties