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 >
 </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
}

CodePudding user response：

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 ></div>

CodePudding user response：

you can do like that.

<div >
   <img  src="./first/path"></img>
   <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;
}