Using CSS sprites on a HTML page

Question

I have browsed all the how-tos about CSS sprites and although some of them are helpful, absolutely none explain how exactly to use the CSS class to display an image in a HTML page.

This is my CSS code, it has two classes.

.sprites{background-image:url('bookie_logos/0csssprites.png');background-color:transparent;background-repeat:no-repeat;}
#3_png{height:16px;width:75px;background-position:0 0;}
#5_png{height:16px;width:75px;background-position:-75px 0;}
...and so on

Which code do I use to display the image I want, not as a link, not as a list, not as a background, just a stand-alone image with width 75 and height 16? I suppose I should be using a DIV and assign two classes for it like this: class="sprites 3_png" but it doesn't work.

UPDATE: There were several problems with the code. The first one was that 3_png should be used as an id, not as a class. Second, the code only worked when naming convention png_N was used instead of N_png, it won't work when it starts with a number. After finding a working solution, I encountered another problem with the images creating a line break, solved it using display:inline. This is the CSS and PHP code which produces the wanted output:

CSS:

.sprites {background-image:url('bookie_logos/0csssprites.png');background-color:transparent;background-repeat:no-repeat;display:inline;}
#png3  {height:16px;width:75px;background-position:0px 0;}
#png5  {height:16px;width:75px;background-position:-75px 0;}

PHP:

$classy = "png" . $db_field['bookieid'];
echo "<td>" , "<img src='transparent.gif' class='sprites' id='$classy' alt='bookie' align='absmiddle'/>" , "</td>";

$classy is a variable which is choosing between 160+ images in the spritesheet. transparent.gif is a 1px transparent gif, as I opted to use IMG tag instead of DIV, and I need to use that 1px gif in order for the IMG tag to actually display the sprite image.

I'd like to thank all the contributors, most of you saw that first part of the problem, where ID should be used instead of class. You all guided me towards the solution, and unfortunately I can only choose one answer, and I'm choosing the one which mentioned display:block as it made me use display:inline later.

Thanks everyone, and I hope this question and answer will help someone else who's having the same problem with CSS sprites.

Answer 1

Your error is using 3_png as a class, it's an ID, also css grammar spec says that ids and classes have to start with an - , _ or letter a-z, so 3_png is invalid, but png_3 isn't.

to get it to work you should use:

 <div id="png_3" class="sprites"></div>

and change your css to reflect the name change.

Answer 2

If you are applying 3_png as a class it won't work.

You will have to set the div's id as 3_png or change the css to make 3_png a class

Option one:

html:

<div id="3_png" class="sprites"></div>

css stays the same.

Option two:

html:

<div class="3_png sprites" > </div>

css:

.sprites{background-image:url('bookie_logos/0csssprites.png');background-color:transparent;background-repeat:no-repeat;}
.3_png{height:16px;width:75px;background-position:0 0;}

Answer 3

If you want to use 1 sprite for displaying multiple images, I think you should try this:

CSS

.sprite {
  background-image:url('bookie_logos/0csssprites.png');
  background-color:transparent;
  background-repeat:no-repeat;
  display:block;
}

#img_1 {
  height:16px;width:75px;background-position:0px 0;
}

#img_2 {
  height:16px;width:75px;background-position:-75px 0;
}

HTML

<div class="sprite" id="img_1">
</div>

<div class="sprite" id="img_2">
</div>

Answer 4

You don't. That's what the <img> tag is for.

Answer 5

Your 3_png is an id not a class .. Either make it class or use id

Answer 6

I would use CSS more like this to make it a little more straight forward:

.icon_box{
    width:75px; 
    height:16px; 
    /* default image */
    background: img('/my/image/file.png') 0 0 no-repeat;
}

.icon1{
    background-position: -75px 0;
}
.icon2{
    background-position: -150px 0;
}

Your HTML

<div class="icon_box icon1"></div>
<div class="icon_box icon2"></div>

This assumes your image sprite is 16px high and has images every 75px from left to right, like this poor ASCII art. =P

[ Img1   Img2   Img3   ... ]

You could use a element ID but if you want to have 2 icons on the same page, you'd run into issues. So, I would just make them all classes.

The idea is the default value sets up your basic "canvas" and then you simply reposition the background image you need.

UPDATE 2

Here's a JSFiddle that uses a similar code to what I wrote above: http://jsfiddle.net/VNn2D/4/

It uses this sprite image: https://i.stack.imgur.com/fuf79.gif

It comes form this article on the topic: http://www.alistapart.com/articles/sprites

Hope that helps.

Cheers!