Background Clip
suggest changeDefinition and Usage: The background-clip
property specifies the painting area of the background.
Default value: border-box
Values
border-box
is the default value. This allows the background to extend all the way to the outside edge of the element’s border.padding-box
clips the background at the outside edge of the element’s padding and does not let it extend into the border;content-box
clips the background at the edge of the content box.inherit
applies the setting of the parent to the selected element.
CSS
.example {
width: 300px;
border: 20px solid black;
padding: 50px;
background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
background-repeat: no-repeat;
}
.example1 {}
.example2 { background-origin: border-box; }
.example3 { background-origin: content-box; }
HTML
<p>No background-origin (padding-box is default):</p>
<div class="example example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
<div class="example example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: content-box:</p>
<div class="example example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents