Applying CSS to image tag to show only bottom half

Question

I have an image tag that is displaying an image of 18 pixels in width and 36 pixels in height. However, I only want to display the bottom 18 x 18 pixels of the image, and not the full 18 x 36 pixels. How do I go about applying a style to the tag in order to accomplish this?

EDIT:

Thanks all for your help! It was a combination of a couple of your answers that got me there. The final styles I came out with are the following --

div.minus
{
    background-image: url('Images/PlusMinus.gif');
    background-repeat: no-repeat;
    background-position: bottom;
    margin : 0px;
    padding : 0px;
    height: 18px;
    width : 18px;
    overflow : hidden;
}

div.plus
{
    background-image: url('Images/PlusMinus.gif');
    background-repeat: no-repeat;
    background-position: top;
    margin : 0px;
    padding : 0px;
    height: 18px;
    width : 18px;
    overflow : hidden;
}

I tried the clip attribute but didn't have much luck with it, and I'm under the gun for a deadline so I'll have to mess with it more later on. Thanks again!

Answer 1

You could apply that image to the background of a <div> and set the height of that div to 18 pixels and the background position.

.cutoff {
  background: url('image.jpg');
  height: 18px;
  background-position: bottom;
}