# background-origin property

The `background-origin` property specifies how a background image (namely the image, not the fill) will be placed relative to an element: part of the background image will be under a border, the background will not be under the border, or the background will be placed only under an element content (that is, `padding` will move the background).

## Syntax

`selector { background-origin: padding-box | border-box | content-box; }`

## Values

Value | Description
--- | ---
`border-box` | A background image will be under a border.
`padding-box` | A background image will not be under a border.
`content-box` | A background image will only be under a content.

Default value: `padding-box`.

## Remarks

The `background-origin` property does not work when `background-attachment` is set to `fixed`. Also, `background-origin` property with `background-repeat` in the `repeat` value always works as with `border-box`.

## Example . By default

By default, the background will not go under a border:

`<div id="elem"></div>` `#elem { background-image: url("bg.png"); background-repeat: no-repeat; border: 10px dashed black; padding: 30px; width: 250px; height: 150px; }`

:

## Example . The border-box value

Now the background will go under the border:

`<div id="elem"></div>` `#elem { background-origin: border-box; background-image: url("bg.png"); border: 10px dashed black; padding: 30px; width: 250px; height: 150px; }`

:

## Example . The content-box value

And now the background will move with `padding`:

`<div id="elem"></div>` `#elem { background-origin: content-box; background-image: url("bg.png"); background-repeat: no-repeat; border: 10px dashed black; padding: 30px; width: 250px; height: 150px; }`

:

## Example . With background-repeat: repeat

When `background-repeat` is set to `repeat`, the `background-origin` property always works as with the `border-box` value, that is, the background always goes under a border:

`<div id="elem"></div>` `#elem { background-repeat: repeat; background-image: url("bg.png"); border: 10px dashed black; padding: 30px; width: 350px; height: 300px; }`

:

## See also

- the `background-clip` property
  that sets the position of both a background image and a fill
- the `background` property
  that is a shorthand property for a background

← →
↑
en ru