Skip to content
Related Articles

Related Articles

CSS | background-origin property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 30 Jun, 2022

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 in the upper left corner.

  • Syntax: 
background-origin: initial;
  • Example: 

HTML




<!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: initial;
            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: 
initial prop
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: 
HTML



<!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: 
padding box
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: 
HTML



<!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: 
border box
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:
HTML



<!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: 
content box
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: 
HTML



<!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: 
initial prop
Supported Browsers: The browsers supported by CSS | background-origin property are listed below: 
  • Google Chrome 1
  • Edge 12
  • Internet Explorer 9
  • Firefox 4
  • Opera 10.5
  • Safari 3
 

My Personal Notes
arrow_drop_up
Previous
CSS | font-kerning Property
Next

CSS | empty-cells Property
Recommended Articles
Page :
HTML | DOM Style backgroundOrigin Property
12, Mar 19
CSS | transition-property Property
31, Dec 18
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
How to use CSS in different dimension (CSS-in-JS) ?
29, Sep 21
CSS Cheat Sheet - A Basic Guide to CSS
28, Apr 22
CSS table-layout Property
17, Dec 18
CSS text-align Property
17, Dec 18
CSS | border-inline-start-style Property
26, Mar 20
How unicode-bidi property is used in CSS ?
21, Apr 21
CSS | transform-origin Property
24, Jul 19
How to use text overflow property in CSS ?
21, Apr 21
How to disable resizable property of textarea using CSS?
13, Nov 18
How content property is used with :after selector in CSS ?
15, Apr 21
CSS | hanging-punctuation Property
21, Jan 19
CSS font-family Property
24, Dec 18
CSS clip Property
27, Dec 18
CSS font-style Property
27, Dec 18
CSS text-decoration Property
28, Dec 18
CSS object-fit Property
31, Dec 18
CSS | line-height Property
31, Dec 18
CSS list-style Property
31, Dec 18
CSS border-style Property
31, Dec 18
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
RahulRanjan4
@RahulRanjan4
Vote for difficulty
Current difficulty :
Medium





Improved By :
Article Tags :
Practice Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!