Setting the Background Image Origin

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

The background-origin Values

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.
 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
            
        <style type="text/css"> 
        p { 
            border: 10px double black; 
            background-image: url(http://java2s.com/Book/HTML-CSSImages/star.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

Setting the Background Image Clipping Style

The background-clip determines the region where the background color and image are drawn in the element's box.

The background-clip Values

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.
 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
       p { 
           border: 10px double black; 
           background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png); 
           background-size: 40px 40px; 
           background-repeat: repeat; 
           background-origin: border-box; 
           background-clip: content-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
Home 
  HTML CSS Book 
    CSS  

Background:
  1. Setting Element Backgrounds
  2. Setting the Background Color and Image
  3. Setting the Background Image Size
  4. Setting the Background Image Position
  5. Setting the Attachment for the Background
  6. Setting the Background Image Origin
  7. Using the background Shorthand Property
Related: