...

View Full Version : Understanding this image sprite



johnsmith153
11-19-2012, 09:42 AM
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.

coothead
11-19-2012, 04:49 PM
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...

<!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

johnsmith153
11-21-2012, 07:38 AM
Brilliant, thanks.

Best solution by far.

Thanks.

coothead
11-21-2012, 09:36 AM
No problem, you're very welcome. ;)



coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum