CSS image crop how?

Showing just part of an image

[silverbytes]

I need to show an image cropped. That's I want to show a 100 x 50 px jpg, but I don't want to show only 100 x 40, leaving 10 px of botton off.

Is there a way to do that?

[netchicken1]

Yes, there are ajax scripts that do that. I have seen one .. somewhere ... keep looking they exist. :)

[Jon_King]

A background image in a layer div works as a crop.

[Benek]

What Jon_King said.

Make the dive 100x4 and put the image as a background on that div.

Or set overflow:hidden on the div and you can put the image right in the div instead of as a background.

[graykat]

Use "clip":

#photoclip {
position:absolute;
height: 100px;
width: 50px;
clip: rect(0px, 100px, 40px, 0px);
overflow: hidden;
background: url(yourimagelocation);
}

[graykat]

Oh!

And place the division tag where you want the photo to go:

<div id="photoclip"></div>

Use "top" and "left" to position the photo onto the page. You may have to use trial and error to get it just right.

[graykat]

Oops,

sorry:

s/b

#photoclip {
position:absolute;
width: 100px;
height: 50px;
clip: rect(0px, 100px, 40px, 0px);
overflow: hidden;
background: url(yourimagelocation);
}