SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb 2 vertical css sprite images but different result

    I created new sprite image using Instant Sprite, sprite_main.png and replaced old sprite image created by SpritMe, spriteme1.png.

    I just changed image path and background positions only but the result is disappointing with sprite_main.png. I don't understand what happen but is that because I added another 20+ icons to the sprite image?

    http://fiddle.jshell.net/6TaQt/40/

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    If you're using online services to create sprites, let them write the background-positoins for you (like spritecow). Otherwise, you'll have to learn how to do it by hand like we all did back in the day, for each sprite.

    I tend to open up my sprite in my image editor. I set the CSS to 0, 0 so I can see the image that appears at that coordinate (I know I'll see something since there's always something at the top left corner). In my image editor I usually use the rectangle selector to draw a box around the icon and check the coordinates of the top left corner. Sometimes I can just set my mouse there directly; it depends on how much transparency in the image.

    The I use those coordinates I see in my image editor and write them as negative background position numbers in CSS.

    So if an image's top left corner is at 15, 47 (15 px from left, 47 px down from top) the background-position is 15px -47px.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used the coordinates given by Instant Sprite and it is same every time I generated the sprite image.

    Is that because some of them are 1 px background image making images below jump to top?

    Maybe I can test all the images coordinates now.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I figured out that the coordinates were wrong. Maybe Instant Sprite gave me wrong or I didn't clear cache before I generated it.


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
  •