Utilizing the Instant Sprite tool, I successfully created my own unique sprite image.
With the help of a repeater control, I assigned the <td> class to be arg16
Private Sub cdcatalog_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles cdcatalog.ItemDataBound
If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
Dim Cell as HtmlTableCell = TryCast(e.Item.FindControl("img"), HtmlTableCell)
Cell.Attributes.Add("class", "text-center sprite arg16")
End If
within the table cell
<td id="img" runat="server" class=""></td>.sprite { background: url('sprite.png') no-repeat top left; }
.sprite.arg16 { background-position: 0px 0px; width: 16px; height: 16px; }
.sprite.aus16 { background-position: 0px -26px; width: 16px; height: 16px; }
.sprite.bel16 { background-position: 0px -52px; width: 16px; height: 16px; }
.sprite.bra16 { background-position: 0px -78px; width: 16px; height: 16px; }
.sprite.chl16 { background-position: 0px -104px; width: 16px; height: 11px; }
.sprite.cyp16 { background-position: 0px -125px; width: 16px; height: 16px; }
.sprite.den16 { background-position: 0px -151px; width: 16px; height: 16px; }
However, the outcome I received was not as expected
for each table cell. Can someone help me identify the error in my code? The "rendered css" is
.sprite {
background: url('sprite.png') no-repeat top left;
}
.sprite.arg16 {
background-position: 0px 0px;
width: 16px;
height: 16px;
}
and this is my sprite image