CSS sprite displaying all images

Question

I am trying to use 1 single image file containing 4 images and display them using CSS sprite. Somehow, all 4 images are displayed. I was referring to one of the examples in w3schools.

<div id="ViewTypeContainer" style="float: right; margin-top: 10px; margin-right: 10px;">
  <img id="calendarView" alt="" src="/Images/ButtonToggle.png" height="1" width="1"/>
  <img id="grdView" alt="" src="/Images/ButtonToggle.png" height="1" width="1" />
</div>

CSS:

#ViewTypeContainer img#calendarView {
    width:82px;
    height:82px;
    background: url('/Images/ButtonToggle.png') 0 0;
}

#ViewTypeContainer img#grdView  {
    width:82px;
    height:82px;
    background: url('/Images/ButtonToggle.png') -30px 0;
}

My image file is in .png format:

enter image description here

Can anyone spot my mistake? Thanks.

are you sure the height and width are 82px? just verify the height and width of just the image you want to display — karthikr, Mar 25 '13 at 15:53
Sprites are really meant to be used as background images to be displayed as the background of a block level element with a set width and height using X and Y postioning on the background image to display the correct portion of the sprite image. — Billy Moat, Mar 25 '13 at 15:53
Could you add your sprite image to the question? (There's an image upload button in the question editing controls.) — Paul D. Waite, Mar 25 '13 at 15:56
Good info here: http://stackoverflow.com/questions/4335957/using-sprites-with-img-tag — Billy Moat, Mar 25 '13 at 16:01

Paul D. Waite · Accepted Answer · 2013-03-25T16:34:39.627

2

Yeah: your img tags have their src attributes pointing at the sprite image too.

If you want the sprite image to show up with the positioning specified in the CSS, the images need a transparent image in their src attribute.

Working example using your image here (I've used a data-URI for the transparent GIF):

http://jsfiddle.net/7Ns8L/

And here's another example using what might be more semantic HTML (depending on what these controls actually do), i.e. no <img> tags:

http://jsfiddle.net/7Ns8L/1/

edited Mar 25 '13 at 16:34

answered Mar 25 '13 at 15:55

Paul D. Waite

96,640
56
199
270

Thanks Paul, so the the sole reason for needing the transparent image if I am not wrong is to remove the borders that will be displayed if no img src is specified? – k80sg Mar 25 '13 at 16:17
@user415795: not quite. `` tags have to have a non-empty `src` attribute to be valid, and if you put a non-existent URL in there, the browser will probably display a broken image icon. Therefore you need a transparent image. As @JQMRookie and commenters mentioned, you might be better off using a different element than ``. – Paul D. Waite Mar 25 '13 at 16:30
1

@user415795: I've added another example showing how you might do it without `` tags. – Paul D. Waite Mar 25 '13 at 16:35

score 1 · Answer 2 · answered Mar 25 '13 at 16:09

Exactly. You're giving a background image to an image. So the IMG tag is displayed as normal size right over the top of your sprite. The concept of sprites is easiest applied if you work with background-position css property. You could either go through the trouble of generating a transparent .png for your IMG tag source (I wouldn't recommend it), or just replace the IMG tag with a div and give the div the same ID and CSS.

CSS sprite displaying all images

2 Answers2