Question

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 doing 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

Answer 1

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>