kentor kentor - 1 year ago 93
CSS Question

Fit background image into second background image

I've got two images - a frame and the image which should fit exactly into that frame. The thing which makes it really hard is the responsiveness.

Two images:

enter image description here

What it should look like (also after resizing):

enter image description here

What I've tried:

.brawler.shelly {
background-image: url("/images/heroes/high/hero_icon_shelly.png");
background-position: center center;
background-size: 85%;
padding-bottom: 75%;
background-repeat: no-repeat;
}

.portrait {
background-image: url("/images/icons/card_common.png");
background-position: center top;
background-size: 100%;
padding-bottom: 75%;
background-repeat: no-repeat;
}

.col-4.col-md-3.col-lg-2.mb-2
.portrait
.brawler.shelly

.col-4.col-md-3.col-lg-2.mb-2
.portrait
.brawler.shelly


JSfiddle:

https://jsfiddle.net/3z68kcbr/

Answer Source

Can you not just play around with the background-size and padding-bottom on .brawler.shelly?

background-size: 77% and padding-bottom: 106% seems to work pretty well for me:

.brawler.shelly {
  background-image: url("http://i.imgur.com/vuv5sdZ.png");
  background-position: center center;
  background-size: 77%;
  padding-bottom: 106%;
  background-repeat: no-repeat;
}

.portrait {
  background-image: url("http://i.imgur.com/i2IoHtw.png");
  background-position: center top;
  background-size: 100%;
  padding-bottom: 80%;
  background-repeat: no-repeat;
}
<div class="container">
  <div class="col-4 col-md-3 col-lg-2 mb-2">
    <div class="portrait">
      <div class="brawler shelly">
      </div>
    </div>
  </div>
</div>

This also has no issue with responsiveness. I've created a fiddle of this over here if you'd like to test how it resizes.

Hope this helps! :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download