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 topcenter 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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.