Applying CSS to image tag to show only bottom half

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: u开发者_开发问答rl('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!

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;
}

I'm afraid you cannot (but I guess you should never say never, so don't give up hope yet).

You have two solutions that involve a little bit more work:

• Place the image inside a 18x18 element that's set to overflow:hidden

• Turn the image element into a 18x18 element that uses background-image