SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Understanding this image sprite

    This works as I want it to, but I just don't understand how the settings used come about this.

    http://page-test.co.uk/v.html

    I understand the first symbol (class 'email-symbol') which is the same size as the image on the sprite sheet, but I don't understand the others.

    It's 'background-position' and 'background-size' where I can't understand how the figures are calculated. There doesn't seem to be a pattern.

    I want to get a formula so I can easily do this for all other images on that sprite sheet and also for other sprite sheets.

    I don't get how background-size:1000% works for the one double the size and then background-size:1200% works for the one ten times the size.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Your thinking is all wrong. A sprite need not be ( and usually isnt) proportional to its container ( not even in this case). remember that the BG-size coefficient will apply to the WHOLE image and not just the visible segment. In other words making the envelope 2x as big is no longer as simple as multiplying the size of the envelope by 200% ( since the envelope is not 100% of your sprite)

    the important part really is that the coordinates are multiplied , roughly it seems, by the size coefficient and thus achieving the alignment:

    EG
    .email-symbol-double {
    border:2px solid blue;
    background-image:url('http://www.page-test.co.uk/spritemap.svg');
    width:57px;
    height:45px;
    background-position:-312px -113px;
    background-repeat:no-repeat;
    background-size:965%;
    }

    note that now the container size is TRIPLE. I needed only 965% to make it so ( I suspect there was some clipping in your original example anyway)
    HOWEVER... my positioning is essentially linear ( ~3x -102px , ~3x -37px)


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
  •