Add Two background images in a same div with same margin - html

Question

I inserted two background images to a div and gave them the top and bottom positions. However, the issue is that I want the images to have an equal top and bottom margin. I'm not sure how to accomplish it.
I want the background images like in the SS.
html:
<div class="license-info">
</div>
css:
.license-info {
width: 100%;
height: 800px;
background: #181f2b;
background-image: url('/images/footerdiamondchain.png'), url('/images/footerdiamondchain.png');
background-repeat: repeat-x;
background-position-y: top, bottom
}

Answer 1

You can specify an independent background-position for each background image. So you could set them equal distance from top and bottom, respectively, via a rule like this:
background-position: center top 80px, center bottom 80px;
center top 80px sets the first image 80px from the top
center bottom 80px sets the second image 80px from the bottom.
.license-info {
width: 100%;
height: 800px;
background: #181f2b;
background-image: url('//placekitten.com/50'), url('//placekitten.com/50');
background-repeat: repeat-x;
background-size: 50px;
background-position: center top 80px, center bottom 80px;
}
<div class="license-info"></div>

Answer 2

you can do like that.
<div class="license-info">
<img class="first-img" src="./first/path"></img>
<img class="second-img" src="./second-img/path"></img>
</div>
.license-info {
position:relative;
}
.license-info .first-img {
position:absolute;
top:50px// change this position
}
.license-info .second-img {
position:absolute;
bottom:50px;
}