How to add a part of an image to a Button in HTML

Question

Hi,

I've a big image and I'd like to add a part of that image to a button. I've a css class that defines the left and top where the little part of the whole image I want is located. Let's say

.image
{
  left: -20;
  top: -200px;
}

I've defined another class that describes the place where I want to put this part of the image.

.image16x16
{
  overflow:hidden;
  position:relative;
  height:16px;
  width:16px;
}

Now I'm trying to do something like this:

<button class='image16x16' type='button'><img class='image' src='image.png'/></button>

But the image is moved outside the area reserved. However, if I change the button to be a simple div or input, the image is place correctly.

<div class='image16x16' type='button'><img class='image' src='image.png'/></div>

Thanks.

Answer 1

Not sure if I totally understand your issue, but since a DIV works as you expect perhaps you just need to add this css:

button { display: block; }

Answer 2

left and top have no meaning without a position other than static!

.image
{
    position: absolute;
    left: -20;
    top: -200px;
}

Also, there's no need to apply class="image" to your <img> tag. Just use this:

.image16x16 img
{
    position: absolute;
    left: -20;
    top: -200px;
}

Answer 3

Have a look at this page on A List Apart.

CSS

div.sprite
{
    /*height and width of the sprites*/
    width: 16px;
    height: 16px;
    background-image: url("sprites.png");
    display: inline-block;
}
div.delete
{
    /*Pixel offsets within the image for a red cross*/
    background-position: 0px 0px;
}
div.confirm
{
    /*Pixel offsets within the image for a green tick*/
    background-position: 0x -16px;
}

HTML

<button>
    <div class="sprite delete"></div>
    Delete
</button>
<button>
    <div class="sprite confirm"></div>
    Confirm
</button>