Posted on Thursday 1 July 2010 by Norbert Laposa

I had an idea of creating a clip image by using CSS, so the CSS clip property looked like the perfect way to achieve that. After some googling I found Joe's article at seifi.org. Joe advocated an entirely functional, but unnecessarily complex solution. 

I came up with a much simpler way. The trick is that you don't need to use the CSS clip property when you want to clip an image. Here is a simple way to clip an image to 300x200px, push 20px top and 30px left:

div.imageWrapper {
width: 300px;
height: 200px;
overflow: hidden;
}
div.imageWrapper img {
margin-top: -20px;
margin-left: -30px;
}

58 Howard Street
Belfast BT1 6PJ

Send email

+44 (28) 9032 8988
+353 (48) 9032 8988