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

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

Answer 2

Give your img the style clip:

.clip{
  position:absolute;
  clip:rect(0 36px 18px 18px);
  top:-18px;
}

This'll cut down the image, and relocate it so you don't get whitespace.

Answer 3

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

Answer 4

I second Victors solution. Not enough rep to vote it up yet but overflow:hidden is a good way to go as it allows you to use the same image resource elsewhere for the top portion. Google CSS and Sprite.