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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:
    initial prop

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

A tech fanatic who can code stuff

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.