CSS background-origin property
Tags: learncss, cssb
Published: 2021-05-10 08:42:05

---
title: CSS background-origin property
published: true
date: 2021-02-25 05:01:08 UTC
tags: LearnCSS,CSSB
canonical_url: https://sharepointanchor.com/learn-css/css-background-origin-property/
---

The background-origin property is used to **specify the background positioning area of the background image**. It is one of the CSS3 properties.

This property allows you to specify whether the background will be positioned relative to the “content box”, “border box”, or the “padding box”.

![📍](https://s.w.org/images/core/emoji/13.0.1/72x72/1f4cd.png) **Note** : If the background-attachment is “ **fixed** “, then this property will be ignored and will not have an effect.

- Background-origin property accepts the following values.
  - **padding-box**
  - **border-box**
  - **content-box**
  - **initial**
  - **inherit**

## Background-Origin property characteristics:

| **Initial value** | padding-box |
| **Applies to** | All elements. It also applies to **`::first-letter`** and **`::first-line`** |
| **Inherited** | No |
| **Animatable** | No |
| **Version** | CSS3 |
| **JavaScript syntax** | **`object.style.backgroundOrigin = "content-box";`** |

## Syntax:

```

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

```

## Values:

| **Value** | **Description** |
| --- | --- |
| **border-box** | It is the **default value**. The background-position is relative to the **border** and the **background-image starts from the upper left corner** of the padding edge. |
| **padding-box** | With this value, the background-position is relative to the **padding box** and the **background-image starts from the upper left corner** of the border. |
| **content-box** | The background-position is relative to the **content box** and the **background-image starts from the upper left corner** of the content. |
| **initial** | It will **set the property to its default value**. |
| **inherit** | **Inherits the property from its parent** element. |

## Example of the background-origin property:

In the following code, we use the background-origin property for your reference.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {

        border: 5px dashed #1E90FF;

        padding: 35px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-repeat: no-repeat;

        background-origin: padding-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-origin property example</h2>

    <p>Here the background-origin is set to "border-box".</p>

    <div class="example1">

      <h2>Hello world.</h2>

      <p> Have a great day!!</p>

    </div>
  </body>
</html>

```

[Try it Yourself Online](https://sharepointanchor.com/code/css/CSS-background-origin-property/CSS-background-origin-property-Ex-1.html)

## Result:

By running the above code, you will get the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_vKirZLuQo3.png)<figcaption>Result of background-origin property</figcaption>

## Example of background-origin property with the “padding-box” and “content-box” values:

The following example code Wil show the difference between padding-box and content-box.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {

        border: 5px dashed #0000CD;

        padding: 35px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

        background-repeat: no-repeat;

        background-origin: padding-box;

      }
      .example2 {

        border: 5px dashed #0000CD;

        padding: 35px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

        background-repeat: no-repeat;

        background-origin: content-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-origin property example</h2>

    <p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>

    <div class="example1">

      <h2>Hello world</h2>

      <p> Have a great day!!</p>

    </div>

    <p>Here the background-origin is set to "content-box".</p>

    <div class="example2">

      <h2>Hello world</h2>

      <p> Have a great day!!</p>

    </div>
  </body>
</html>

```

[Try it Yourself Online](https://sharepointanchor.com/code/css/CSS-background-origin-property/CSS-background-origin-property-Ex-2.html)

## Result:

After running the above code, you will get the output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_vBZuJeCQXg.png)<figcaption>Result of CSS background-origin property</figcaption>

## Example of a background-origin property with different values:

In the below example, you will see how to set two background images.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {

        border: 5px double black;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");

        background-repeat: no-repeat;

        background-origin: content-box, border-box;

      }
      #example2 {

        border: 5px double black;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");

        background-repeat: no-repeat;

        background-origin: content-box, padding-box;

      }
      #example3 {

        border: 5px double black;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");

        background-repeat: no-repeat;

        background-origin: content-box, content-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-origin property example</h2>

    <p>Here the background-origin: content-box, border-box; is set:</p>

    <div id="example1">

      <h2>Hello World</h2>

      <p>The first background-image starts from the upper left corner of the border.</p>

      <p>The second background-image starts from the upper left corner of the content.</p>

    </div>

    <p>Here the background-origin: content-box, padding-box:</p>
    <div id="example2">

      <h2>Hello World</h2>

      <p>The first background image starts from the upper left corner of the padding edge.</p>

      <p>The second background-image starts from the upper left corner of the content.</p>

    </div>
    <p>Here the background-origin: content-box, content-box; is set:</p>

    <div id="example3">

      <h2>Hello World</h2>

      <p>Both background images start from the upper left corner of the content.</p>

    </div>
  </body>
</html>

```

[Try it Yourself Online](https://sharepointanchor.com/code/css/CSS-background-origin-property/CSS-background-origin-property-Ex-3.html)

## Result:

After executing the above code, you will get the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/JT0n5D7FQN.gif)<figcaption>Background-origin property with different values</figcaption>

## Browser-Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_r4SYrgtMUW.png)<figcaption>Browser-support</figcaption>

**Read Ahead:**

- **[CSS background Property](https://sharepointanchor.com/learn-css/css-background-property/)**
- **[background-clip property](https://sharepointanchor.com/learn-css/css-background-clip-property/)**
- **[CSS background-image property](https://sharepointanchor.com/learn-css/css-background-image-property/)**
- **[HTML <base> Base Tag](https://sharepointanchor.com/learn-html/html-base-tag/)**
- **[HTML <div> Division tag](https://sharepointanchor.com/learn-html/html-div-division-tag/)**

## Frequently Asked Questions:

**What is the purpose of background-origin property?** 

The background-origin property is used to **specify the background positioning area of the background image**.

 
 
**What will happen if we give the background-origin property with the “inherit” value?** 

It Inherits the property from its parent element.

 
 
**What are the values accepted by background-origin property?** 

The values used in background-origin property are padding-box, border-box, content-box, initial, inherit.

 
 
**Which is the default value of background-origin property?** 

**border-box** is the default value. The background-position is relative to the border and the background-image starts from the upper left corner of the padding edge.

 
 

The post [CSS background-origin property](https://sharepointanchor.com/learn-css/css-background-origin-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).