CSS Image Sprites

Image sprites are multiple images that are placed on a single image. There are many advantages to using an image sprite in making a page.

Benefits of Using CSS Image Sprites

The use of multiple images on a single page could mean that it would take a long time because each individual image would mean a separate server request. That means the more images that are placed on a page, the longer it would take to load up that image. So the use of image sprites instead of separate images would mean that the page would load a lot faster. Here is a sample code for an image sprite:

img_navsprites.gif

Now when you are using an image sprite, you would have to specify which image would have to be shown on the page. If you do not, then the whole image sprite would display with all of the images in it. Here is a sample code for an image sprite that is defining which part of it should appear:

img.home

{

width:46px;

height:44px;

background:url(img_navsprites.gif) 0 0;

}

 

This part of the code, width:46px; height:44px;, defines the portion of the image that should appear on the page. This section, background:url(img_navsprites.gif) 0 0;, defines the kind of background that you want for the page. What we have described is probably the easiest method of using image sprites, but there are other ways that it can be utilized. You can also use links and even achieve some sort of hover effect.

Using Image Sprites for a Navigation List

You can also utilize image sprites in order to create a navigation list. Here is an example of an image sprite being used to make a navigation list:

#navlist{position:relative;}

#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}

#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}

#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}

#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}

#next{background:url('img_navsprites.gif') -91px 0;}

Let’s take a look at what the codes mean:

#navlist{position:relative;} -This part means that the position has been defined to relative. </p>

#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} – In this part, the margin and the padding is at 0 and the items for the list are positioned in absolute.

#navlist li, #navlist a{height:44px;display:block;} – This part of the code defines the height. As you can see it is set at 40 pixels.

#home{left:0px;width:46px;} – This means that the position is set to be at the left. It also defines the width which is at 46%.</p>

#home{background:url(img_navsprites.gif) 0 0;} - This is the part that defines the background image to be used. It also states the position to be occupied.

#prev{left:63px;width:43px;}- This code means that the image sprite is placed all to the left edge of the page.

#next{background:url(‘img_navsprites.gif’) no-repeat -91px 0;} -It sets the background that is going to be used for the page.

These are just some of the things that you should learn about image sprites. Mastering the use of this property can be a great asset in designing a page.

Comments are closed.