Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

CSS Sprites and How To Use Them

Posted on April 2, 2011 | No Comments

I thought you would never ask. Let’s start by showing the BEFORE example. Notice in the CSS below how the anchor tag does not get a background-image, but each individual class does.

#nav li a {background:none   no-repeat left center}
#nav     li a.item1 {background-image:url('../img/image1.gif')}
#nav   li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav       li a.item2   {background-image:url('../img/image2.gif')}
#nav   li a:hover.item2 {background-image:url('../img/image2_over.gif')}


Now check out the AFTER example. Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.

#nav li   a {background-image:url('../img/image_nav.gif')}
#nav   li a.item1 {background-position:0px   0px}
#nav li a:hover.item1       {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav   li a:hover.item2 {background-position:0px   -215px;}


Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.


Leave a Reply

You must be logged in to post a comment.