How to place image on part of other image

I am trying to place image of pawn on part of other image of a pawn but when I am trying to do it it puts the pawns near the previous pawn:

This is what I want to have:

HTML:

<td class="" row="0" col="0"><span>1</span>
<img class="soldiers" playernumber="1" soldiernumber="1" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="1" soldiernumber="2" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="1" soldiernumber="3" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="1" soldiernumber="4" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="2" soldiernumber="1" src="Resources/images/player_2.png">
<img class="soldiers" playernumber="2" soldiernumber="2" src="Resources/images/player_2.png">
<img class="soldiers" playernumber="2" soldiernumber="3" src="Resources/images/player_2.png">
<img class="soldiers" playernumber="2" soldiernumber="4" src="Resources/images/player_2.png">
</td>

CSS:

td {
    width: 80px;
    height: 80px;
    text-align: left;
    vertical-align: top;
    border: 1px solid black;
    position: relative;
}

.soldiers
{
    width:20px;
    height:20px;
}

td span {
    position: absolute;
    bottom: 0;
}

Answers


I've prepared a jsFiddle demonstrating what you intend.

$(function(){
    var s = 0;
    $('.soldiers').each(function(){
        $(this).css({'top':s,'left':s});
        s+=10;
    });
});

What's happening in the fiddle is I've added position:absolute; to the class .soldiers and incremented (via jQuery each() method) a determined value (in this case 10) for top and left, to each .soldiers element.

You may also need to work with z-index to work layer positioning for the soldiers if you're moving pieces later on


Need Your Help

Implementing DAL and BOL

asp.net-mvc design-patterns architecture repository-pattern data-access-layer

I'm Using MVC 3 and I'm having trouble using Entity Framework so I'm trying to understand what would be the best approach to implement my own DAL.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.