1

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
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
sohaib
  • 574
  • 5
  • 16
  • You might find this helpful: https://stackoverflow.com/questions/9070362/multiple-background-images-in-one-div – Kevon Nov 04 '22 at 19:33

2 Answers2

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>
ray
  • 26,557
  • 5
  • 28
  • 27
0

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;
}
Giorgi Shalamberidze
  • 143
  • 1
  • 7
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 08 '22 at 10:24