CSS Property background-origin

The background-origin specifies where the background color and image are applied.


Initial value padding-box
Inherited no
Version CSS3
JavaScript syntax object.style.backgroundOrigin="content-box"

CSS Syntax

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

Property Values

The property values are listed in the following table.

border-boxThe background color and image are drawn within the border box.
padding-boxThe background color and image are drawn within the padding box.
content-boxThe background color and image are drawn within the content box.

Browser compatibility

background-origin Yes Yes Yes Yes Yes


An example showing how to use background-origin CSS property.

p { <!--  ww w.  jav a2  s . c o m-->
    border: 10px double black; 
    background-image: url(http://java2s.com/style/download.png); 
    background-size: 40px 40px; 
    background-repeat: repeat; 
    background-origin: border-box; 
        HyperText Markup Language (HTML) is the main markup language for 
        displaying web pages and other information that can be displayed 
        in a web browser(From From Wikipedia, the free encyclopedia).

Click to view the demo