CSS Property background-origin








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

Summary

ItemValue
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.

ValueDescription
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

Example

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

<!DOCTYPE HTML> 
<html> 
    <head>  
        <style> 
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; 
} 
        </style> 
    </head> 
    <body> 
        <p> 
        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).
        </p> 
    </body> 
</html>

Click to view the demo