CODEWITHSUNDEEP
c#htmlcssasp.netimage
Vignesh Subramanian
Vignesh Subramanian

Reputation: 7289

is it possible to add background position to img /asp:image tag

I am working on optimizing page load

First option i went for is base64 conversion

I have 18 small images to be loaded in home page Since base64 is 1.3x the actual image size i went for image sprites

After spriting the images, i am able to use it for replacing background-image , background-position for div, but i am not able to use sprited image for replacing img and asp:image tags. I need to have them as <asp:image> as there are some code behind functions attached to it

Upvotes: 1

Views: 201

Answers (2)

SmartDev
SmartDev

Reputation: 2862

You can add transparent images for all asp:Image controls. They will render as HTML images. And then you should make sure that you add the correct css class with the appropriate sprite for each.

See an example at http://jsfiddle.net/9wo2mL32. Also, make sure you add width and height to the class (or to the asp:Image control):

<asp:Image ID="imgImage" runat="server" Height="100" Width="100" ...

Upvotes: 1

Aristos
Aristos

Reputation: 66641

Yes you can use sprites on images, the key points is to add height/width and an empty/transparent image 1pixel x 1pixel on the src so can load something and show something as image tag, because with out valid src browsers may show error img, or nothing

The rendered results can be like:

<img class="rgoto" src="spacer.gif" height="9" width="8" >

and style :

img.rgoto {
background: url(sprite.gif) no-repeat -230px -20px;
height: 9px;
width: 8px;
}

Upvotes: 1

Related Questions