How to set Png Border Image correctly - html

Question

I'm trying to set a png to be the bottom border of one div and again at the top of my footer. I've tried border-image as well as using it as the background image for my div, but I've failed to figure it out. Right now I'm just getting a black bar at the bottom of my first div, and a little black mark at the top of my Footer. Any explanation would be greatly appreciated.
Here's my code so far.
Main Page
<div className='about-wrapper'>
<img src='https://image.shutterstock.com/image-photo/gorilla-thinking-260nw-54482215.jpg' alt='Adam Face'></img>
<h2>Name</h2>
<p>Welcome to my site! I am a developer currently developing in ReactJS.</p>
</div>
.about-wrapper {
padding: 20px;
border-bottom: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 1%;
background: linear-gradient(#519DFE, #110BFF);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
height: 100vh;
color: white;
}
Footer
<div className='footer-wrapper'>
</div>
.footer-wrapper {
height: 400px;
background: #001ED4;
border-top: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 1%;
Here's what my pages look like
First Div
Footer

Answer 1

The border-image-slice property indicates which parts of the image are used for the border; with only a single value, it will the same percentage of the width and height for the slices.
(Note that I used about 10% in my illustration to make it clear, but it works the same for 1%.) Since you have only a border bottom for the about-wrapper div, only the bottom part will be used.
So if you want the entire picture for a bottom border, the solution is to not use an 1% image slice. You would need 0 0 100% 0 (for top, right, bottom, left respectively). Same with the footer: for the top border there, use 100% 0 0 0.
.about-wrapper {
padding: 20px;
border-bottom: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 0 0 100% 0;
background: #110BFF linear-gradient(#519DFE, #110BFF);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
height: 100vh;
color: white;
}
.footer-wrapper {
height: 400px;
background: #001ED4;
border-top: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 100% 0 0 0;
<div class='about-wrapper'>
<img src='https://image.shutterstock.com/image-photo/gorilla-thinking-260nw-54482215.jpg' alt='Adam Face'>
<h2>Name</h2>
<p>Welcome to my site! I am a developer currently developing in ReactJS.</p>
</div>
<!-- Footer -->
<div class='footer-wrapper'>
</div>