background-origin
Specifies the background positioning area of a background.
Syntax
Note: If the background-attachment
is fixed
, then background-origin
will be ignored.
background-origin: <value>;
where <value>
can be one of the following:
content-box
: Relative positioning to the content box.padding-box
: Relative positioning to the padding box.border-box
: Relative positioning to the border box.- Global values:
inherit
,initial
,revert
,unset
Example 1
Set background positioning to the edge of the content box:
.main {border: 5px dashed #f1f1f1;padding: 15px;background: linear-gradient(purple, yellow) no-repeat;background-origin: content-box;}
Example 2
Set background positioning to the inside edge of the border:
.main {border: 5px dashed #f1f1f1;padding: 15px;background: linear-gradient(purple, yellow) no-repeat;background-origin: padding-box;}
Example 3
Set background positioning to the edge of the border:
.main {border: 5px dashed #f1f1f1;padding: 15px;background: linear-gradient(purple, yellow) no-repeat;background-origin: border-box;}