Add Two background images in a same div with same margin

Issue

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
}

Solution

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>

Answered By - ray