1 Replies - 1702 Views - Last Post: 19 August 2009 - 02:42 PM

#1 rkmalbz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 10-August 09

how to combine image in photoshop to be use in css sprite?

Post icon  Posted 15 August 2009 - 03:18 AM

hi..how do i combine image like in the tutorial i have read to be used in CSS Sprite like rollovers button..

This is the link of the tutorial i have read:
http://www.webvamp.c...ers/#end-result

i just don't get it..
Is This A Good Question/Topic? 0
  • +

Replies To: how to combine image in photoshop to be use in css sprite?

#2 KuroTsuto  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 42
  • View blog
  • Posts: 182
  • Joined: 13-February 09

Re: how to combine image in photoshop to be use in css sprite?

Posted 19 August 2009 - 02:42 PM

The simple answer to your question is that you... well... combine them. Make a new image that is large enough to hold all of the graphics that you would like to be a part of the sprite (typically in a vertical strip, horizontal strip, or grid-layout). Copy+Paste, drag and drop, or otherwise bring all of the files you would like to use as sprites into the same image. Save it. Utilize CSS's "background" and "background-position" properties to use your new conglomerate image-sprite and define a point (typically the top-left point) of the graphic you would like to display from your sprite via pixel coordinates. Define the bottom-right point using the element in question's (typically a table <td> or a <div>) width and height.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1