Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    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
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there johnsmith153,

    your background-size calulations are not quite right.

    The size of the svg image is 180x80.
    Double is therefore 360x160 and by 10 is 1800x800.

    Code it like this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Title</title>
    
    <style type="text/css">
    #email-symbol {
        width:19px;
        height:15px;
        margin:10px;
        border:2px solid #f00;
        background-image:url('http://www.page-test.co.uk/spritemap.svg');
        background-size:180px 80px;
        background-position:-102px -37px;
     }
    #email-symbol-double {
        width:38px;
        height:30px;
        margin:10px;
        border:2px solid #00f;
        background-image:url('http://www.page-test.co.uk/spritemap.svg');
        background-size:360px 160px;
        background-position:-204px -74px;
     }
    #email-symbol-ten-times {
        width:190px;
        height:150px;
        margin:10px;
        border:2px solid #008000;
        background-image:url('http://www.page-test.co.uk/spritemap.svg');
        background-size:1800px 800px;
        background-position:-1020px -370px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="email-symbol"></div>
    <div id="email-symbol-double"></div>
    <div id="email-symbol-ten-times"></div>
    
    </body>
    </html>
    
    As you can see the arithmetic now makes sense.

    IE and Safari render the svg better than Firefox and Opera.

    coothead

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Brilliant, thanks.

    Best solution by far.

    Thanks.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts

    No problem, you're very welcome.


    coothead


  •  

    Posting Permissions

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