- Theory
- Theory
- Comments
Background Cropping
The background-clip property controls how the background is cropped. Moreover, not only are the background images cropped, but the background color is cropped as well.
The property values are the same as for background-origin: padding-box, border-box, and content-box.
The border-box value is set by default, and the background image is not cropped at all.
The value of padding-box slices the background along the inner edge of the frame area.
The value of content-box slices the background along the edge of the content area.
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Cropping</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="set">
<div class="portrait portrait-small"></div>
<div class="portrait portrait-full"></div>
</body>
</html>
CSS
.portrait {
box-sizing: border-box;
padding: 20px;
width: 250px;
height: 250px;
border: 20px solid rgba(255, 255, 0, 0.4);
background: url("img/muffin.jpg") no-repeat #ffffff;
background-size: 100% 100%;
}
.portrait-small {
background-origin: content-box;
}
.portrait-full {
background-origin: border-box;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- For the
.portrait-smallportrait, assign thebackground-clipproperty with thepadding-boxvalue , - and then change the value to
content-box. - For the
.portrait-fullportrait, assign thebackground-clipproperty with thepadding-boxvalue , - and then change the value to
content-box.
Comments