CODEWITHSUNDEEP
htmlcss
sanjihan
sanjihan

Reputation: 6046

spritesheet image used as background fill the container

I am trying to make a selected portion of the background image, taken from spritesheet, fill the whole space in its container.

In this pen, the background image should always fill the character. Also while being resized, which is the main problem. https://codepen.io/timsim/pen/wdWZWv

If you use background-position, you don't how big the image should be, just where to cut it. Also, setting height and width assumes that it needs to cut that image with dimensions of height and width.

#image{
    background-repeat: no-repeat;
    background: url(../assets/spritesheet.jpg);
    background-position: -220px -220px;
    width: 90%;
    height: 90%;
}

Upvotes: 0

Views: 93

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You want to utilize background-size based on the size of your container and the part of the sprite you want to use.

#image {
    width: 10%;
    padding-bottom: 10%;
    background-color: red;
    background-image: url(https://cdn.codeandweb.com/blog/2016/05/10/how-to-create-a-sprite-sheet/spritestrip.png);
    background-size: 650%;
    background-position: 21% 146%;
    background-repeat: no-repeat;
}
<div id="container">
  <div id=image></div>
</div>

Upvotes: 3

Related Questions