Sprites: A Big Set of Images when You’re Only Expecting One

April 3, 2010 at 4:18 pm | Posted in Cross-Browser Support, CSS, HTML, JavaScript, Software, Sprites, Web | Leave a comment

Have you ever right-clicked to save a  picture in a web page and instead of just the picture you wanted, you get a bunch of pictures all smooged together?

When your web page has more than one image (jpg, png, or gif) your web page loads faster with only one graphic called a sprite instead of multiple image.

Your browser has to go back and forth over the internet with requests and replies for each image. So the web developer merged the pictures together into a Sprite sheet to make your page load faster.  Then, once on your computer the javascript and CSS style codes they sent pulls the image apart.

Learn how your computer pulls the one image from the many by reverse engineering the Cascading Style Sheet (CSS) parameters for a .jpg, .gif, .bmp or .png file used in the background-image: url(‘~~~~’); style parameter in a <div>.

My web-based utility lets you display the main sprite and click the upper left hand corner and lower right hand corner of the part of the image you want to calculate the other 3 critical style elements height:~px; width:~px;  background-position: xpx ypx;.  You’ll also want to use CSS elements such as  float:left; margin-right:15px; background-repeat:no-repeat 

No javascript, HTML, or CSS knowledge is necessary. But, if you’re learning or have to develop your own web page using Sprites start here.

To just display just the Opera browser logo from the sprite above as a background for

<div id=”Opera”></div>

use the following CSS (remember # is for id and the period . is for class):

#Opera{
background-position: -100px -2px;
height: 36px;
width: 35px;
background-repeat: no-repeat;
display: inline-block;
border: solid 2px blue;
float: left;
margin-right: 15px;
}

The tool works for the latest Microsoft Internet Explorer and Google Chrome browsers.

Blog at WordPress.com.
Entries and comments feeds.