take image from sprite and put it in tag

Question

I have 2 kind of <td>, one is <td class="GH>, and the second is <td class="BH">

I have a sprite image with 10 circles in different colors.

What I need to do is to put only the green circle in <td class="GH> and the blue in <td class="BH">.

the size of a circle is 12px on 13px

my css is like this:

td.GH
{
    background:url(http://localhost:36557/%D7%AA%D7%99%D7%A7%D7%99%D7%94%20%D7%97%D7%93%D7%A9%D7%94/Resources/images/status.png);
    width:12px;
    height:13px;

}
td.BH
{
    background:url(http://localhost:36557/%D7%AA%D7%99%D7%A7%D7%99%D7%94%20%D7%97%D7%93%D7%A9%D7%94/Resources/images/status.png);
    width:12px;
    height:13px;

}

Unfortunately it's not working. I get the image in the background of the , but it's the all image, with all circles.( All my other that do not have a class are empty as they supposed to be). One more problem is that because it is a td, the width and height is changing the td width and height, but I want the width and height of the picture.

Thank you all.

`http://localhost:36557/%D7%AA%D7%99%D7%A7%D7%99%D7%94%20%D7%97%D7%93%D7%A9%D7%94/Resources/images/status.png` what's this? — Muhammad Talha Akbar, Dec 24 '12 at 11:15
Have a read about [background-position](http://www.w3schools.com/cssref/pr_background-position.asp) and [overflow](http://www.w3schools.com/cssref/pr_pos_overflow.asp) — Moseleyi, Dec 24 '12 at 11:16
@AspiringAqib This is where the image is on my computer, this is not the problem because I can see the image when i'm running the project. — shlomi, Dec 24 '12 at 11:24

Billy Moat · Answer 1 · 2012-12-24T11:49:21.093

0

You need to specify the X and Y co-ordinates of the image on the sprite.

The top left corner of the sprite is 0 0.

So you'll be looking to add something like:

<table>
 <tbody>
  <tr>
   <td class="BH"><span></span></td>
  </td>
 </tbody>
</table>

td.BH span
{
    background-image:url(http://localhost:36557/%D7%AA%D7%99%D7%A7%D7%99%D7%94%20%D7%97%D7%93%D7%A9%D7%94/Resources/images/status.png);
    background-repeat:no-repeat;
    background-position: 40px 130px; // edit to be the correct values for your image
    width:12px;
    height:13px;
    display:block;

}

edited Dec 24 '12 at 11:49

answered Dec 24 '12 at 11:20

Billy Moat

20,792
7
45
37

I have try this but it's not working. This is what I get: [link]http://tinypic.com/r/28sx9bn/6 The problem is that the css is "working" on the cell and not on the image. I try to do somthing like: But it's not working. – shlomi Dec 24 '12 at 11:34
The TD won't size down to the size of the sprite you are specifying because the other TDs are causing it to stretch as they have more content in them. I'd recommend placing a SPAN tag within the TD and placing the sprite as the background of the SPAN. I've amended my answer slightly for you. – Billy Moat Dec 24 '12 at 11:37
Can you please show me an example please? I have try to do something like this: But in the css I don't know how to go to this element, something like: tbody.tr.td.img.home Is not working of course – shlomi Dec 24 '12 at 11:47
I've edited my answer showing the HTML code to use a SPAN tag. You won't be able to do it the way you suggested. – Billy Moat Dec 24 '12 at 11:50
thank you but it's not working. It's a little bit more complicated. I'm creating the in jquery like this: $('').html(reservation["Status"]).appendTo(tr); to create my table, and when I write this: $('').html(reservation["Status"]).appendTo(tr); It's not working. – shlomi Dec 24 '12 at 12:15
Maybe this? $('').html(reservation["Status"]).appendTo(tr); – Billy Moat Dec 24 '12 at 12:17
As I said above you need to specify the X and Y co-ordinates of your image within the sprite. – Billy Moat Dec 24 '12 at 12:28
Here is the code: [link]http://jsfiddle.net/ZLzXR/18/ As you can see in the result there is 5 circles, I want that only the green one will be from the left of CN. The size of the circle is 12X13 – shlomi Dec 24 '12 at 12:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/21639/discussion-between-shlomi-and-billy-moat) – shlomi Dec 24 '12 at 12:35

take image from sprite and put it in tag

1 Answers1