CSS: background origin

By Xah Lee. Date: .

background-origin

background-origin

The start position of the image, from top left.

any of

  • padding-box (default)
  • border-box
  • content-box
.x {
 background-origin: padding-box;
 background-origin: border-box;
 background-origin: content-box;
}

example

example. padding-box

ABC
.xorig-padding-box-vv6Zr {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 background-repeat: no-repeat;
 background-origin: padding-box;
 width: 150px;
 height: 150px;
 color: red;
 border: dotted 20px red;
 padding: 0.5rem;
}

example. border-box

ABC
.xorig-border-box-vv6Zr {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 background-repeat: no-repeat;
 background-origin: border-box;
 width: 150px;
 height: 150px;
 color: red;
 border: dotted 20px red;
 padding: 0.5rem;
}

example. content-box

ABC
.xorig-content-box-vv6Zr {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 background-repeat: no-repeat;
 background-origin: content-box;
 width: 150px;
 height: 150px;
 color: red;
 border: dotted 20px red;
 padding: 0.5rem;
}

CSS. Background