Setting the Background Image Origin
Description
The origin of the background specifies where the background color and image are applied.
The background-origin property controls this feature.
The allowed values are described in the following list.
- 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.
Example
The following code shows the use of the background-origin property.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w ww. j av a 2 s. co m-->
border: 10px double black;
background-color: lightgray;
background-image: url(http://www.java2s.com/style/download.png);
background-size: 40px 40px;
background-repeat: repeat;
background-origin: border-box;
}
</style>
</head>
<body>
<p>This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
</p>
</body>
</html>