SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to clip background sprite images to prevent other images from appearing

    I saw an article today that explained how to do this, but I can't find it now.

    It basically illustrated a method of using generated content to display a portion of an image sprite. In effect, allowing you to create tight spacing between images within your sprite without fear of other images showing through when using a single icon on a tall background.

    Anyone know this method and have an example?

  2. #2
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the answer I was looking for.

    Given a div classed "tags", to add an icon located in sprite.png, clipping it to 20x16, the code would be:

    Code:
    .content .tags:before{content:'';background:url(../../sprite.png) no-repeat 0 -1415px;height:20px;width:16px;position:absolute;left:30px}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •