Post: CSS: How to use Image Sprites
Options
03-03-2013, 01:30 AM
#1
IVI40A3Fusionz
Former Gaming Squad Member
You must login or register to view this content.
Have you ever attempted to download an image from a website but it takes you to a url that contains more than 1 image which is only a 1 image file?
What they are using is called an Image Sprite, it's a very useful tool to use and will benefit your site alot and here's how to use a Image Spirit and what it is.
Have you ever attempted to download an image from a website but it takes you to a url that contains more than 1 image which is only a 1 image file?
What they are using is called an Image Sprite, it's a very useful tool to use and will benefit your site alot and here's how to use a Image Spirit and what it is.
What is an Image Sprite?
Why use an Image Sprite?
- Due to a webpage with more than average amount on images on it, it can take a longer time to load the page. Image Sprite's fix this.
- It reduces the number of server requests and will substantially save bandwidth.
How to use an Image Sprite!
- Instead of using multiple separate image we can just use 1 image, in my case i am going to be using this image. You must login or register to view this content.
- Ok so now to set up the collecting of our image. You're going to want to set up a background in CSS, here's an example.
#image_sprite
{
background: url(https://static.a.gs-cdn.net/webincludes/css/images/icons-16x16.png);
}
At the moment all this will display in the image we started off with so we're going to modify it a little bit.
- Now we are going to set up a width and height for our image, all these images are set to 16x16 but you'll want to edit yours.
#image_sprite
{
width: 16px;
height: 16px;
background: url(https://static.a.gs-cdn.net/webincludes/css/images/icons-16x16.png);
}
Now all this will display is our image but in a dimension of 16x16 which we don't want, we want to display our selected image at 16x16 makes sense?
- Now we are going to select our actual image, in this example i'm going to select the 'search' icon which will be displayed. To do this we are going to set the 'background-position', there are 2 ways to do this, adding the position to the end of your 'background' or create a 'background-position' line.
Here are the 2 ways inwhich you can do this.
#image_sprite
{
width: 16px;
height: 16px;
background: url(https://static.a.gs-cdn.net/webincludes/css/images/icons-16x16.png) -64px -80px;
}
#image_sprite
{
width: 16px;
height: 16px;
background: url(https://static.a.gs-cdn.net/webincludes/css/images/icons-16x16.png);
background-position: -64px -80px;
}
Functions explained
- width: 16px; height: 16px;
- These define our width and height in pixels, however you don't need to use pixels if you don't want to.
- background: url(You must login or register to view this content.
- This specifies our background which will be displayed on the page and the url of which our image in stored.
- background-position: -64px -80px;
- This defines our images position, or what image we want to display using the coordinates left, top
The following 2 users say thank you to IVI40A3Fusionz for this useful post:
Copyright © 2026, NextGenUpdate.
All Rights Reserved.
