Retrieving image from css image sprites with images of different sizes

Question

I'm aiming at doing a chess game or actually a chessengine just for the fun of it :-) The easy way to have several chesspieces would be to have one image for each chesspiece but that would be a lot of http-requests which seems unnecessary.

I want to use image from https://commons.wikimedia.org/wiki/File:Chess_Pieces_Sprite.svg

and retrieve the image with background-position and that would not be a problem...

BUT the issue is that the chessboard and it's square are not always the same size (it must be responsive) and I want each sprite to act as a normal image and resize accordingly to the squares.

I've tried with background-size and background-size and wrappers in combinations but obviously I'm missing out something. Maybe it's the wrong approach in this situation? What do you think?

I've also thought about "slicing" the sprite image and create the images from php but I think using css would be a nicer solution.

If I have like this html (which is generated from html) - I would like to view a scaled version of the chesspieces.png (which is 2000x667 in dimension) so it fits in this div and scales accordingly but only shows a portion of the chesspieces.png file, e.g. a rook. I hope you understand what I mean!?

<div style="float:left;background:#ffffff;
width:100px;height:100px;" 
class="square"><img src="chesspieces.png">
</div>

Please do tell if you need more information!

UPDATE Thanks for your input!

I've tried with this:

<div style="width:100px;height:100px;background: #ffffff 
url('chesspieces2000.png') -20% 40% no-repeat;background-size: cover; 
class="square"></div>

What ever I put in in y pos % it does not work. I want the image to fill out the whole square so therefore I'm using background-size:cover

I've also tried background-position-y:40% but nothing happens. I'm able to change ypos with fixed pixel values. Is this supposed to work in this way?

Clarification:

I have this output:

and with this html:

<div class="square" 
style="float:left;width:100px;height:100px;background:#000000"><div 
style="width:100px;height:100px;background:#000000 
url('chesspieces2000.png') 0 0 no-repeat;background-size:100%;" 
class="square"></div></div>

And I want to fetch one chesspiece scale it so it covers the square to 100% width and height auto.

UPDATE2:

Thanks to @Robo Robok Thanks!- I solved it, but some mixing with values made it work as I wanted to!

<div style="width:100%;height:100%;
background:#ffffff url('chesspieces2000.png') 19% -10% no-repeat;
background-size:auto 170%;"></div>

Here's the queen! :-)

and when resizing image wrapper:

This works fine as well. It covers all the square!

<div style="width:100%;height:100%;
background:#ffffff url('chesspieces2000.png') 20% 0% no-repeat;
background-size:auto 200%;"></div>

background position / and size is typically how it's done. Haven't used sprites in a long time. (re. sliding doors) w3schools.com/cssref/pr_background-position.asp — ArtisticPhoenix
– ArtisticPhoenix, Commented Mar 29, 2018 at 21:53
@ArtisticPhoenix - it would be easy if width and height were the same, but with could also be like 70px or like 300px in the wrapper div. — bestprogrammerintheworld
– bestprogrammerintheworld, Commented Mar 29, 2018 at 21:55
That's fine, it makes it way harder. But there is no issue with it. background-position: 100px 50px; etc. It's much easier if they are consistent width and consistent height. The difference is you have to enter them manually instead of in a loop or something. Make an object in JS {king: [100,200], queen : [200,375]} or what have you. — ArtisticPhoenix
– ArtisticPhoenix, Commented Mar 29, 2018 at 21:58
If it's not obvious, it has to be a background image, not an img tag. Then set the div to a fixed width, set the background to the image, set the position of the part you want. Set no-repeat, etc. etc... — ArtisticPhoenix
– ArtisticPhoenix, Commented Mar 29, 2018 at 22:01
@ArtisticPhoenix - I am not interested in using JS in this case. It's a chess engine that basically should just return value and not show them but I want to test the functionality. — bestprogrammerintheworld
– bestprogrammerintheworld, Commented Mar 29, 2018 at 22:03

Robo Robok · Accepted Answer · 2018-03-29 22:59:04Z

1

Try this:

<div style="width: 100px;
            height: 100px;
            background: url('chess.svg') no-repeat 40% 100%;
            background-size: auto 200%;"></div>

background-size needs to be auto 200%, because you have 2 rows in your sprite, which means the entire background needs to take twice the height of your element.

Background positions for each sprite are:

First row: 0 0, 20% 0, 40% 0, ... 100% 0
Second row: 0 100%, 20% 100%, 40% 100%, ... 100% 100%

answered Mar 29, 2018 at 22:59

Robo Robok

23.1k22 gold badges84 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bestprogrammerintheworld Over a year ago

Thanks a lot! I got it working by mixing some of the values. I missed out on the auto-parameter in the background-size :-)

bestprogrammerintheworld Over a year ago

Tested with 100% instead of 200% as you wrote . Now I got it to 100% :-)

Robo Robok Over a year ago

I didn't quite understand what you mean. 100%?

bestprogrammerintheworld Over a year ago

I understand completely(100%)

Robo Robok Over a year ago

I mean why did you replace 200% with 100%?

Collectives™ on Stack Overflow

Retrieving image from css image sprites with images of different sizes

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related