{clip} Property | CSS: Presentation Layer

clip Property

clip defines what portion of an element is visible; clip applies only to elements with position:absolute.

url() clip Dynamic Sprites Method for ie

The example below utilizes the url() clip method, which relies on content to insert a sprite image, which is then cropped via clip:

{}
/** use url() / clip method **/
/** using the content property to insert the sprite which is then cropped with clip:  **/
#second {
  position: relative;
  padding-left: 20px;
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML);
}

#second:before,
#second img {
  content: url(sprite.png);
  position: absolute;
  top: 3px;
  clip: rect(0 30px 15px 15px);
  left: -15px; /* to offset the clip value */
  _left: -35px; /* some massaging for IE 6 */
}

References and Resources

• clip - mdn