Setting the Background Image Origin
The background-origin specifies where the background color and image are applied.
The background-origin Values
Value | Description |
---|---|
border-box | The background color and image are drawn within the border box. |
padding-box | The background color and image are drawn within the padding box. |
content-box | The 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>
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
Value | Description |
---|---|
border-box | The background color and image are drawn within the border box. |
padding-box | The background color and image are drawn within the padding box. |
content-box | The 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>