CSS | background-origin property

The background-origin is a property defined in CSS which helps in adjusting the background image of the webpage. This property is used to set the origin of the image in the background. By default, this property sets the background image origin to the upper-left corner of the screen/webpage.

Syntax:

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

Property Value:
initial: This takes the initial/default value of setting the background origin to the padding edge int the upper left corner.

Syntax:
```
background-origin: initial;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>background-origin property</title> 
    <style> 
        .gfg { 
            padding: 40px; 
            width: 400px; 
            background-image:  
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png'); 
            background-repeat: no-repeat; 
            background-origin: intial; 
            border: 1px double; 
            text-align: justify; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg"> 
        <p> 
          Prepare for the Recruitment drive of product 
          based companies like Microsoft, Amazon, Adobe 
          etc with a free online placement preparation 
          course. The course focuses on various MCQ's  
          & Coding question likely to be asked in the  
          interviews & make your upcoming placement  
          season efficient and successful.  
        </p> 
    </div> 
</body> 
  
</html> 

Output:

padding-box: This property is used to set the origin of the background image to the padding edge in the upper left corner.

Syntax:
```
background-origin: padding-box;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>background-origin property</title> 
    <style> 
        .gfg { 
            padding: 40px; 
            width: 400px; 
            background-image:  
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png'); 
            background-repeat: no-repeat; 
            background-origin: padding-box; 
            border: 1px double; 
            text-align: justify; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg"> 
        <p> 
          Prepare for the Recruitment drive of 
          product based companies like Microsoft, 
          Amazon, Adobe etc with a free online  
          placement preparation course. The course 
          focuses on various MCQ's & Coding question 
          likely to be asked in the interviews & 
          make your upcoming placement season  
          efficient and successful.  
        </p> 
    </div> 
</body> 
  
</html>       

Output:

border-box: This property is used to set the image to the border of the body of the webpage i.e. the absolute upper left corner.

Syntax:
```
background-origin: border-box;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>background-origin property</title> 
    <style> 
        .gfg { 
            padding: 40px; 
            width: 400px; 
            background-image:  
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png'); 
            background-repeat: no-repeat; 
            background-origin: border-box; 
            border: 1px double; 
            text-align: justify; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg"> 
        <p> 
          Prepare for the Recruitment drive of  
          product based companies like Microsoft, 
          Amazon, Adobe etc with a free online  
          placement preparation course. The course 
          focuses on various MCQ's & Coding question  
          likely to be asked in the interviews & make 
          your upcoming placement season efficient  
          and successful.  
        </p> 
    </div> 
</body> 
  
</html>     

Output:

content-box: This property is used to set the origin of the background according to the content of the division/body wherever the property is being used.

Syntax:
```
background-origin: content-box;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>background-origin property</title> 
    <style> 
        .gfg { 
            padding: 40px; 
            width: 400px; 
            background-image:  
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png'); 
            background-repeat: no-repeat; 
            background-origin: content-box; 
            border: 1px double; 
            text-align: justify; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg"> 
        <p> 
          Prepare for the Recruitment drive of 
          product based companies like Microsoft, 
          Amazon, Adobe etc with a free online 
          placement preparation course. The course 
          focuses on various MCQ's & Coding question 
          likely to be asked in the interviews & make 
          your upcoming placement season efficient  
          and successful. 
        </p> 
    </div> 
</body> 
  
</html> 

Output:

inherit: It is used to inherit the property from already used code (parent property) else works as padding-box by default.

Syntax:
```
background-origin: inherit;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>background-origin property</title> 
    <style> 
        .gfg { 
            padding: 40px; 
            width: 400px; 
            background-image: 
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png'); 
            background-repeat: no-repeat; 
            background-origin: inherit; 
            border: 1px double; 
            text-align: justify; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg"> 
        <p> 
          Prepare for the Recruitment drive of  
          product based companies like Microsoft, 
          Amazon, Adobe etc with a free online  
          placement preparation course. The course 
          focuses on various MCQ's & Coding question 
          likely to be asked in the interviews & make  
          your upcoming placement season efficient and 
          successful.  
        </p> 
    </div> 
</body> 
  
</html>       

Output:

Supported Browsers: The browsers supported by CSS | background-origin property are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: