- Theory
- Theory
- Comments
Frame Image: border-image-repeat, Part 1
The border-image-repeat property specifies how the background of the frame side areas (the green areas in the figure) will be filled.
The property has four values: stretch, repeat, space, and round.
The default value is stretch. When this value is set, the background images are stretched to the full length of the side areas.
If the repeat value is set, background images will be repeated. However, they can be cropped.
You can set the fill mode separately for the horizontal and vertical sides of the frame.
For example:
/ * All borders of the frame are filled in stretch mode * /
border-image-repeat: stretch;
/ * The horizontal borders are filled in repeat mode, and the vertical borders are filled in stretch mode */
border-image-repeat: repeat stretch;Let’s take a look at what the difference is between these two options.
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frame Image: border-image-repeat, Part 1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="portrait"></div>
</body>
</html>
CSS
.portrait {
box-sizing: border-box;
margin: 50px auto;
padding: 10px;
width: 270px;
height: 270px;
outline: 10px solid white;
border: 50px solid rgba(0, 0, 0, 0.4);
border-image-source: url("img/border-img.png");
border-image-slice: 50;
border-image-repeat: stretch;
background: url("img/border-img.png") no-repeat center #ffffff;
background-clip: padding-box;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Set the
border-image-repeatproperty with a value ofstretch repeatfor the.portraitblock, - then change the block width to
350px - and also change the height to
350px.
Comments