CSS Image Sprites

Image Sprites

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

Its pretty simple..

img.home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;// if this wont work you can try background-image:url(); and background-position : x & y axis

Just specify width and height of an image you are willing to place and then in background provide the image url with x & y position. Thats it.

People think its complicate..it is complicate as we think like that..in reality its simple..for more you can browse w3schools.


Sprite generator:




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s