Using sprite images

written by Web designers London on October 16, 2012 in Tutorials and Web design with 3 comments

Using sprite images

I always use sprite images where ever I can with my web design projects. What is a sprite image and why use them?
Well a sprite image is multiple images going to be used in your website on one image file. I use them to speed up the loading process of the web page plus when you are using hover state images there is no delay waiting for another image loading up.

sprite image
To show how to use them I will use my personal website you can view it here, where I used an image sprite to show the social icons. As you see can the images to the left have each social icon needed in both normal and hover state.

What we need to do is find out the height and width of the individual icon in this case the height and width is 43 pixels. Firstly we need to set up the HTML code:


    <div class="social">
        <ul>
            <li><a class="www" href="#" target="_blank" title="Web design"></a></li>
            <li><a class="dribble" href="#" target="_blank" title="Dribbble"></a></li>
            <li><a class="forrst" href="#" target="_blank" title="Forrst"></a></li>
            <li><a class="facebook" href="#" target="_blank" title="Facebook"></a></li>
            <li><a class="twitter" href="#" target="_blank" title="twitter"></a></li>
        </ul>
    </div>

We have settled the icons in a div called social, then we have given each link a class, that’s about it really just use the code above as a reference.

.social {  
	margin:auto; 
	z-index:300;
	width:215px;
	height:43px;
}
.social li { 
	list-style:none; 
	display:inline-block; 
	float:left; margin:0; 
	position:relative;
	z-index:300;
}

.www {
	height:43px;
	width:43px;
	background:url(../img/social-sprite.png) no-repeat;
	cursor:pointer;
	display:block
}

.dribble {
	height:43px;
	width:43px;
	background:url(../img/social-sprite.png) -43px 0 no-repeat;
	cursor:pointer;
	display:block
}

.forrst {
	height:43px;
	width:43px;
	background:url(../img/social-sprite.png) -83px 0 no-repeat;
	cursor:pointer;
	display:block
}

.facebook {
	height:43px;
	width:43px;
	background:url(../img/social-sprite.png) -123px 0 no-repeat;
	cursor:pointer;
	display:block
}

.twitter {
	height:43px;
	width:43px;
	background:url(../img/social-sprite.png) -163px 0 no-repeat;
	cursor:pointer;
	display:block
}
.www:hover {background:url(../img/social-sprite.png) 0 -42px no-repeat;}
.dribble:hover {background:url(../img/social-sprite.png) -43px -42px no-repeat;}
.forrst:hover {background:url(../img/social-sprite.png) -83px -42px no-repeat;}
.facebook:hover {background:url(../img/social-sprite.png) -123px -42px no-repeat;}
.twitter:hover {background:url(../img/social-sprite.png) -163px -42px no-repeat;}

sprites2We then set up the social div to where it needs to go, we need to style each link class. Let’s take the Dribbble link. We set the height and width in this case 43px by 43px, we have to call the image as normal but we also need to state the position of the image. We then need to display the image as a block.

We then have to set up the hover state, all we need to do is the same as the background-image but change the image position.

That’s it you are now working with image sprites.