Can I adjust the offsets of multiple images within an image and resize it to a different width and height?
I have an image that I want to shrink while maintaining the x and y offsets of the individual images inside it.
Below is a sample of the image I have and the desired output:
Thank you for your help!
.container {
width: 960px;
}
.full {
background: url('http://ddragon.leagueoflegends.com/cdn/8.5.2/img/sprite/champion1.png') no-repeat;
width: 100%;
height: 200px;
}
.img-container {
width: 40px;
height: 40px
}
.shrinked {
background: url('http://ddragon.leagueoflegends.com/cdn/8.5.2/img/sprite/champion1.png') -48px -48px no-repeat;
height: 100%;
width: 100%;
}
<div class="container">
full image
<div class="full"></div>
40px centered
<div class="img-container">
<div class="shrinked"></div>
</div>
</div>