Basic Link Rollover as CSS Sprite

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;
}

a:hover {
       background-position: 0 -30px;
}

The set height and width ensure only a portion of the sprite.png graphic is shown. The rollover shifts the position of the background image, revealing a different area of the graphic.

Comments

  1. User Avatar
    Kyle Mac
    Permalink to comment#

    Might be worth it to add a {text-indent: -9000px;}

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Yep, that’s necessary if you are intending to hide the text and just show image. Just because it’s a sprite doesn’t automatically mean that’s the intention though.

    • User Avatar
      Vlad
      Permalink to comment#

      a {
      display: block;
      text-indent: -10000px;
      background: url(sprite.png) no-repeat;
      background-position: center top;
      }

      a:hover {
      background-position: center bottom;
      }

    • User Avatar
      Dyllon
      Permalink to comment#

      Vlad, the [background-position] attribute is not needed, you can just append the position “center top” to the already declared background attribute.

  2. User Avatar
    timani
    Permalink to comment#

    Aint this just a plethora of nifty resources!!!

  3. User Avatar
    drudube
    Permalink to comment#

    //* this is code of vlad*//
    a {
    display: block;
    text-indent: -10000px;
    background: url(sprite.png) no-repeat;
    background-position: center top;
    }

    a:hover {
    background-position: center bottom;
    }

    //*i add some:*//
    a:active {
    background-position: center center
    }

    soo: 3 status of bg image

    • User Avatar
      Mike Cotton
      Permalink to comment#

      When designing dynamic text links for many CMS Software packages (like WordPress or Joomla), you can use this if the background image of the link changes on hover, but you would not use the “text-indent” attribute.

  4. User Avatar
    Benjamin Pries
    Permalink to comment#

    What about using span tags and setting them to have display: none; in the CSS instead of setting an indent?

    • User Avatar
      Michael
      Permalink to comment#

      This would work Benjamin, but would thwart screen readers I believe. Something to that effect I know. ;)

  5. User Avatar
    Michael
    Permalink to comment#

    This might be a stupid question, but what if you have a horizontal list of nav buttons? Would you make a different image for each button? If so, would you have to give each button a class name?

    I’m pretty sure I don’t know what I’m talking about. :-)

    Thanks,
    M

    • User Avatar
      jund
      Permalink to comment#

      maybe you have to make sure your questien clearer…

    • User Avatar
      Derek
      Permalink to comment#

      You can fit all graphics for your whole site in one sprite if you feel like doing all the pixel calulations for background positioning. You would still need to give each button its own class name since each button would have different position inside the sprite itself.

  6. User Avatar
    Hiren Khambhayta
    Permalink to comment#

    I have used the same trick in my client website for icon links in http://www.toolshandles.com

  7. User Avatar
    Ahmad Awais
    Permalink to comment#

    I need more explanations ? :(

  8. User Avatar
    Ahmad Awais
    Permalink to comment#

    ????

    • User Avatar
      Flaviu
      Permalink to comment#

      Not sure if I can explain it properly, as English is not my native language, but I will try to be clear:

      1- In an image editor program(photoshop) you line up the images, icons, etc.. It is better to calculate to have same distance between images.. Icons should be the same dimensions.

      2- You load the image in an anchor -> you define it as a block and define the size (width/height) of the image(icon) -> you can also add here the background-position (for mouse out state)

      3- on mouse over you define a new background-position, so the image will change state. In our example, on hover, we have defined the position(coordinate) of the image in the sprite.png.

      Why we use this?
      – Like this, we load one picture(that contain our icons with all states) only one time per page and we use it several times. The image will be cached and reused.
      – We don’t have to save and use a lot of images, with 2-3 states.

      I hope I was clear enough.
      Cheers.

    • User Avatar
      Ahmad Awais
      Permalink to comment#

      Its really nice explanation brother …
      thankx a lot

  9. User Avatar
    Gigi
    Permalink to comment#

    I’ve been trying to figure sprites out for a while. It would be helpful to see what the tip does.

  10. User Avatar
    Ian
    Permalink to comment#

    I’m confused, with all of these examples, I only see one image in each of them.

    I thought a sprite always had two images? What would be the complete code for a sprite with both images (hover and static– or hover, static and used link)?

    Thanks in advance

    Ian

    • User Avatar
      Der
      Permalink to comment#

      u r not seen the big picture here, the idea in css sprite is that u r using 1 image file havin 2 pics side to side or top to bottom doesn’t matter is up to u, usin css to add bkgrd to ur container then usin pseudo ‘hover’ to reposition that graphic to have an illusion of two graphics inside that container

  11. User Avatar
    Greg
    Permalink to comment#

    How can this work in line? I have a line of text that needs to be followed with a button that when clicked downloads a pdf.

    Perhaps it is easier to use two images rather than a sprite?

  12. User Avatar
    Splungeman
    Permalink to comment#

    If the visible portion of your sprite has a dimension that would fit in a sidebar for example, would the entire sprite work if it is actually wider than the displayed image?

  13. User Avatar
    Kiseki

    Thanks, this worked really well once I understood the background-position values.

  14. User Avatar
    chadtulio

    Hi will this work on responsive websites

    a {
    display: block;
    background: url(sprite.png) no-repeat;
    height: 30px;
    width: 250px;
    }

    because of the fixed width and height, will it be possible to make it responsive..?

    Thank you,
    chadtulio

  15. User Avatar
    muns88
    Permalink to comment#

    There has to be some way of using “%” vs “px” to make it work. As long as your background image scaled well.

  16. User Avatar
    Aman
    Permalink to comment#

    Would be better if i could see an example right away!

  17. User Avatar
    Barry
    Permalink to comment#

    Sprite images can be as large as you want….So if the image is 50px x 50px your image canvas can be 1000px x 1000px if you like…So if you want loads of white space around the image area that is OK…I often separate each image by 100px blocks purely for maths purposes and to avoid any unforeseen chances that the other images on that png file may show…

    For example if I have a menu and each item is 250px wide x 40px high, then i make sure that each image in the sprite are not within 300px of each other if they are side by side…

  18. User Avatar
    Jason
    Permalink to comment#

    You all can see an example of a sprite right away. It’s called “Google”. Just sayin.

  19. User Avatar
    surender sharma
    Permalink to comment#

    its work like a masking just show the image according to ur tag width and height if u hav a image file with height 100px and width 100px and ur social icon size is 30px 30px then u can write code like this
    a{
    dispaly:block;
    background:url(images/sprite_file.jpg) left top no-repeat;
    height:30px; /*according to icon height size/
    width:30px; /*according to icon width size
    /
    text-indent:-9999999px;
    }
    a:hover{
    background:url(images/sprite_file.jpg) left bottom no-repeat;
    }

    in hover u can see ur file bottom part in 30px by 30px mask area so make sure in bottom of the prite.jpg ur hover image“

  20. User Avatar
    Deborah
    Permalink to comment#

    Does this only work on hover or can I set it for visited?

  21. User Avatar
    surender sharma (Dimple)
    Permalink to comment#

    Deborah Good question 90% i m sure that it’s only work only on hover and for 10% i will try

  22. User Avatar
    stephen
    Permalink to comment#

    CSS Sprites has been around a very long time. Read a far more interesting and educational article about on alistpart.com :
    http://alistapart.com/article/sprites
    // I hold no affiliation with AListApart; It is just a component of CSS I am most passionate about – I was writing code and creating graphics for this style of menus back in the early 00’s.

  23. User Avatar
    ofcyln
    Permalink to comment#

    If someone needs to convert image to CSS this link can help them:

    Base64 CSS Generator
    Online base64 css, dataURI generator. Convert your images easily to base64 CSS, Data URI, XML.

    http://www.base64css.com/

  24. User Avatar
    Bev MacDonald
    Permalink to comment#

    It’s been more than 20 years since I wrote code so keep that in mind while you laugh hysterically.

    I was wanting to break some lengthy text into 3 or 4 chunks and let the user move it as they finish reading. I was wondering if I could use the image sprite to do this. Also if I did, would I have to break up the text and save each piece as an image?

  25. User Avatar
    Robert Baker

    I know this is an old post, but this is exactly what I needed.

    How do I make the image responsive? I’ve tried everything, but I only get just a tiny bit of the image.

    • User Avatar
      Robert Baker

      It needs to shrink in height as well as the width.

      I tried width: 100%, max-width: 625px and height: auto, but I get nothing.

    • User Avatar
      Sarah
      Permalink to comment#

      Try adding “height:auto;” to #divname img

  26. User Avatar
    Vera Jenell
    Permalink to comment#

    Thank you so much!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag