Showing a part of an image in HTML 5

Question

Consider I have an image containing 100 icons with size of 16x16. So the image size is 1600x16. Now I want to have an HTML 5 tag to show the nth image. What's the HTML syntax to define a specific part of image to show

<img src="pic.jpg" height="16" width="16" offsetOrSomething=??/>

Answer 1

Use the image as a background and use the background-position to move it..

<span class="icon nth"></span>

and

.icon{
  width:16px;
  height:16px;
  display:inline-block;
  background-image: url('pic.jpg');
}
.icon.nth{
  background-position:-32px -16px; /*both left and top should be multiples of the icon dimensions*/
}

---

If you have to do it like in your example, then you would need a wrapper again that is overflow:hidden and then move the image inside it..

<span class="icon-wrapper"><img src="pic.jpg" style="left:-16px;top:-32px;" /></span>

and

.icon-wrapper{
    width:16px;
    height:16px;
    display:inline-block;
    overflow:hidden;
    position:relative;
}
.icon-wrapper img{position:absolute;}

Answer 2

A simple way is constraining the dimensions of the parent to crop the image...

<div style="height:10px; overflow-y:hidden;">

    <img src="pic.jpg" height="16" width="16" />

</div>

Try setting the margin top to a negative value to see the hidden part.