<!DOCTYPE html>
<html>
<head>
<title>CSS background-origin property</title>
<style type="text/css">
.padding {
background-origin: padding-box;
}
.border {
background-origin: border-box;
}
.content {
background-origin: content-box;
}
div {
background-image: url("../../images/img_nat.png");
background-repeat: no-repeat;
border: 20px double #777;
padding: 25px;
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<h4><code>background-origin: padding-box;</code></h4>
<div class="padding"></div>
<h4><code>background-origin: border-box;</code></h4>
<div class="border"></div>
<h4><code>background-origin: content-box;</code></h4>
<div class="content"></div>
</body>
</html>
