Background-origin and background-clip property is nearly same but has little difference.
In below sections, we will see the difference between background-origin and background-clip. Both properties have three options: border-box, padding-box, and content-box. The background-origin property determines where the background is placed. While the background-clip determines what part of the background is shown. The properties can be used together or independently.
<html>
<head>
<style>
div{
background-image: url(bimg.png);
display: inline-block;
width: 500px;
height: 250px;
color: #fcfa05;
padding: 20px;
border: 10px dashed #333;
font-size: 2em;
font-weight: bold;
margin: 0 0 20px 20px;
}
div span{
font-size: 1em;
color: #fff;
}
</style>
</head>
<body>
<h1>Below you can see the comparison between Background-Origin and Background-Clip based on their attributes.</h1>
<h2>Default behaviour</h2>
<div>
Background-Origin<br/>
<span>Default behaviour is border-box</span>
</div>
<div>
Background-Clip<br/>
<span>Default behaviour is border-box</span>
</div>
<h2>Attribute: border-box</h2>
<div style="background-origin: border-box; background-repeat: no-repeat;">
background-origin : border-box<br/>
<span>Border is overlapping image</span>
</div>
<div style="background-clip: border-box;">
background-clip : border-box<br/>
<span>Border is overlapping image</span>
</div>
<h2>Attribute: padding-box</h2>
<div style="background-origin: padding-box; background-repeat: no-repeat;">
background-origin : padding-box
<br/>
<span>See the side corners. Image has padding in left but not in right side.</span>
</div>
<div style="background-clip: padding-box;">
background-clip : padding-box
<br/>
<span>See the side corners. Both side has equal padding. Border is not overlapping image.</span>
</div>
<h2>Attribute: content-box</h2>
<div style="background-origin: content-box; background-repeat: no-repeat;">
background-origin : content-box
<br/>
<span>Image is shifted toward content but at the right corner, image and border is overlapping each other.</span>
</div>
<div style="background-clip: content-box;">
background-clip : content-box<br/>
<span>Image and border has equal space at all corners and image has shifted toward content.</span>
</div>
</body>
</html>
Hope it helps you. You can download the working example also.
