CSS background-origin Property

CSS background-origin

The background-origin property in CSS specifies the positioning area of the background image. It determines whether the background image’s position starts from the border edge, padding edge, or content edge of an element.

Syntax of background-origin

</>

Copy

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

Values

Value	Description
`padding-box`	The background image starts from the padding edge (default).
`border-box`	The background image starts from the border edge.
`content-box`	The background image starts from the content edge.
`initial`	Sets the property to its default value (`padding-box`).
`inherit`	Inherits the value from its parent element.

Default Value

padding-box

Examples for background-origin

Using the CSS background-origin Property

The following examples demonstrate how to use the background-origin property to control the starting position of the background image.

</>

Copy

/* Background originates from the padding box */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-origin: padding-box;
}

/* Background originates from the border box */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-origin: border-box;
}

/* Background originates from the content box */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-origin: content-box;
}

Example for Border-Box Origin

Below is an example demonstrating how the background image starts from the border edge using background-origin: border-box:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 200px;
    border: 15px dotted black;
    padding: 20px;
    background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
    background-origin: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="box">Background Origin: Border-Box</div>

</body>
</html>

Example for Padding-Box Origin

background-origin: padding-box;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 200px;
    border: 15px dotted black;
    padding: 20px;
    background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
    background-origin: padding-box;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="box">Background Origin: Padding-Box</div>

</body>
</html>

Example for Content-Box Origin

background-origin: content-box;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 200px;
    border: 15px dotted black;
    padding: 20px;
    background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
    background-origin: content-box;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="box">Background Origin: Content-Box</div>

</body>
</html>

Browser Support

The background-origin property is supported in most modern browsers. Below is a compatibility table:

Browser	Version
Chrome	4.0
Edge	9.0
Firefox	4.0
Safari	3.0
Opera	10.5

TutorialKart

CSS background-origin Property