image control in asp.net (<img> element) -> inside image positioning help !

i have an image component in asp.net like below :

<div id="imgOperatorLogoContainer">
    <asp:Image ID="imgOperatorLogo" runat="server" ToolTip="bla bla"
                AlternateText="bla bla" ImageUrl="~/Images/c"
                Width="170px" Height="191px" />
</div>

as you see i put width and height for this image , but by doin开发者_运维技巧g this face-images.jpg (3*170 = 510 * 191) is stretched in the element area!

but i do n't want this act , because face-images.jpg contains 3 images (170*191) inside and i want to control their positioning with css and jquery!

i know we can do this job by a div element - > but what about an image component of asp.net!

that image after render like below (html) :

<img style="height: 191px; width: 170px;" alt="bla bla" src="Images/face-images.jpg" title="bla bla" id="imgOperatorLogo">

but why the below css s do not work for this image :

#imgOperatorLogo
{
  background-position: 0px 0px;
}

or

#imgOperatorLogo
{
  background-position: -170px 0px;
}

or

#imgOperatorLogo
{
  background-position: -340px 0px;
}

we can fix this issue by an alternate div -> but in this way we lose alt text and i think that is important for SEO

thanks in advance

Try this:

First image:

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) 0 0;">
</div>

Second image:

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) -170px 0;">
</div>

Third image:

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) -340px 0;">
</div>

Is the same... The IMG controls renders an ID that can be used via jQuery using the # selector or you can use the CssClass that renders a class and use the . selector

take a look into css sprites..

ok first of all, which ¨below¨ comment are you referring to? secondly, when you want it to render like an tag why would you try and put a style for background-image on it? And you wanna add alternate text? you can generate image tags with jquery with styles suggested above with alt-text attr, or just add title attr. or do you want it to stop from stretching(since you seem to know the size), just add your own width and height..and how DO you wanna display it? three separate images? You don´t wanna use DIVs and you wanna display them in one ASP.Net Image control that has the size of one of the three images? what do you want?