Home/ Questions/Q 7549519
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T09:57:51+00:00

I have browsed all the how-tos about CSS sprites and although some of them

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0