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