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: url(
                    'https://www.geeksforgeeks.org/wp-content/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>                    

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    Output:
    
initial prop

    • 

  • padding-box: This property is used to set the 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: url( 
    

                    'https://www.geeksforgeeks.org/wp-content/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>                     
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    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: url( 
    

                    'https://www.geeksforgeeks.org/wp-content/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>                     
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    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: url( 
    

                    'https://www.geeksforgeeks.org/wp-content/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>                     
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    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: url( 
    

                    'https://www.geeksforgeeks.org/wp-content/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>                     
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
initial prop

    • 




          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
RahulRanjan4
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 : 
CSS
HTML
Web Technologies

           	
Practice Tags : 
HTML

        

         

         
 
         
        Be the First to upvote.

                

        



        
        
        
        
        

    

            

            0
            

            

                             No votes yet.
                    

            
            
            
            
            
        

        
        

        

        

        

        

        

        


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