Open In App
Related Articles

CSS background-origin property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.
  • padding-box: This property is used to set the origin of the background image to the padding edge in the upper left corner. 
  • 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.
  • 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.
  • inherit: It is used to inherit the property from already used code (parent property) else works as padding-box by default. 

Example: In this example, we are using the background-origin: initial property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>background-origin property</title>
    <style>
        .gfg {
            padding: 40px;
            width: 400px;
            background-image:
                url(
            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

Example: In this example, we are using the background-origin:padding-box property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>background-origin property</title>
    <style>
        .gfg {
            padding: 40px;
            width: 400px;
            background-image:
                url(
            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

Example:  In this example, we are using the background-origin:border-box property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>background-origin property</title>
    <style>
        .gfg {
            padding: 40px;
            width: 400px;
            background-image:
                url(
            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

Example: In this example, we are using the background-origin:content-box property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>background-origin property</title>
    <style>
        .gfg {
            padding: 40px;
            width: 400px;
            background-image:
                url(
            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

Example:  In this example, we are using the background-origin: inherit property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>background-origin property</title>
    <style>
        .gfg {
            padding: 40px;
            width: 400px;
            background-image:
                url(
            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
  • Edge
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads