Javascript board game characters

[StickmanJohn]

So im working on a project for my graduation for my Javascript class and i already have the highest mark achievable, just because its not a hard class at all, and basically, i have the whole board game functioning, but my problem is the character images, i was wondering if theres way to split images and make them into the same background. This is how im doing it now
[img]http://i.imgur.com/TibpFfWh.png[/img]
[img]http://i.imgur.com/m9tTXk3h.png[/img]

Not great but it works :P any ideas?

[URL="http://gmhorizon.com/Games/BoardGame/"]Game Link[/URL]

[01271]

Yeah, you can do this:
[url]https://jsfiddle.net/b3yafbn7/[/url]
You can make the boxes be a background image and then have a second background image over top.

#thing{
  width:500px;
  height:500px;
  background-size: contain;
  background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Bat-shadow.svg/300px-Bat-shadow.svg.png), 0, 0, 100%, url(https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg) 100%;
}

You can also do a [URL="https://css-tricks.com/css-sprites/"]spritesheet[/URL] and have the background-position be different and set the width and height so that the sprites are nice and stuck together.
You can even combine the two for maximum showoff

[StickmanJohn]

Thanks il take that into account

[Cow Muffins]

So you need four layers (divs) for each tile.

The background, which is the static box image.

Then you need a layer for the bat, bart, and bone images.

You can toggle the visibility of the layers depending on which combination you want to display.

For the half images you can make a new CSS class that has a clip-path.

clip-path: polygon(0 0, 0% 100%, 100% 100%);

Will get you the bottom of an image.

clip-path: polygon(0 0, 100% 100%, 100% 0);

Will get you the top of an image.

[StickmanJohn]

[QUOTE=Cow Muffins;51774430]So you need four layers (divs) for each tile.

The background, which is the static box image.

Then you need a layer for the bat, bart, and bone images.

You can toggle the visibility of the layers depending on which combination you want to display.

For the half images you can make a new CSS class that has a clip-path.

clip-path: polygon(0 0, 0% 100%, 100% 100%);

Will get you the bottom of an image.

clip-path: polygon(0 0, 100% 100%, 100% 0);

Will get you the top of an image.[/QUOTE]

thanks