Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

CSS background-origin property

background-origin sets the origin position of the background image.

The origin can align with content-box, padding-box, or border-box.

Example

#

A background image with a background-origin value of padding-box.
The image starts at the edge of the padding box -- inside the border.

<style>
  .origin {
    height: 280px;
    padding: 25px;
    border: 25px solid moccasin;
    background-image: url("/img/css/sunflowers.jpg");
    background-origin: padding-box;
  }
</style>

<div class="origin"></div>

Syntax

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

Values

#

Value Description
padding-box Default. Background image starts from the upper left corner of the padding edge
border-box Background image starts from the upper left corner of the border
content-box Background image starts from the upper left corner of the content
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different background-origin values.
The image shifts to and from the top left with each box change.

<style>
  .origin-example {
    height: 250px;
    border: 25px solid moccasin;
    padding: 25px;
    background-image: url("/img/css/sunflowers.jpg");
    background-origin: content-box;
  }
</style>

<div class="origin-example"></div>

Browser support

This table shows when background-origin support started for each browser.

Chrome
4.0 Jan 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
10.5 Mar 2010
Safari
3.0 Jun 2007

You may also like

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Guides