CODEWITHSUNDEEP
cssimage
Jagd
Jagd

Reputation: 7306

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: 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!

Upvotes: 12

Views: 25760

Answers (3)

tsmigiel
tsmigiel

Reputation: 382

For times when background-image is not suitable, you can use transform along with overflow hidden:

<div class="plus">
    <img src="Images/PlusMinus.gif" />;
</div>
<div class="minus">
    <img src="Images/PlusMinus.gif" />;
</div>

<style>
  div.plus,
  div.minus {
    height: 18px;
    overflow: hidden; 
  }
  div.minus img {
    transform: translate(0, -50%);
  }
</style>

Upvotes: 0

Novikov
Novikov

Reputation: 4489

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

Upvotes: 10

Victor Nicollet
Victor Nicollet

Reputation: 24577

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

Upvotes: 6

Related Questions