Animation sprite sheet - css

Question

I am trying to animate some characters for a school project but I am running into problems. As I am totally new to this world so I am looking for some guidance and I was hoping this would be the right place.
My first question:
I've made a sprite sheet in illustrator for one of my characters. http://gryfaberbay.dk/kea/forhelp/spritesheet.png (I've made it into a png file so you guys can see) When I try to animate my character and make her walk by using my sprite sheet the feet from the overlying sprite show.
Here's my code:
#princess_sprite {
background-image: url(img/spritesheet_prinsesse.svg);
width: 18vw;
height: 45vw;
background-size: 300%;
/* - mod venstre. */
}
.princess_walkcycle {
animation-name: princess_walkcycle_kf;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: steps(3);
}
#keyframes princess_walkcycle_kf {
0% {
background-position: 0%;
}
100% {
background-position: -300%;
}
}
#princess_container {
position: absolute;
top: 8%;
left: 50%;
}
.princess_move_left {
animation-name: princess_move_left_kf;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
/*animation-timing-function: ease;*/
}
#keyframes princess_move_left_kf {
0% {
left: 100%;
}
100% {
left: 71.31%;
}
}
I am hoping you guys are willing to help me! Thanks so much :)
Sincerely,
Gry

Answer 1

You need to adjust the height and width of #princess_sprite in conjunction with background-size property.
Here is a simplified version of your code:
#princess_sprite {
width: 100px;
height: 200px;
background-image: url(http://gryfaberbay.dk/kea/forhelp/spritesheet.png);
background-size: 300%;
animation-name: princess_walkcycle_kf;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: steps(3);
}
#keyframes princess_walkcycle_kf {
0% {
background-position: 0%;
}
100% {
background-position: -300%;
}
}
<div id="princess_sprite">
</div>