What is CSS sprites and how to implement them on a page ?
Let’s understand how to implement CSS image sprites on a page. CSS Image Sprites are the set of images combined in a single image. It is used to decrease the download burden of the site and save bandwidth.
So instead of downloading multiple images, we download a single image and use the different positions within the image for different purposes within the web page.
To create a sprite, we make use of CSS properties and set the combined image as the background of an element then we position it using the background-position property.
Let us understand this with two different examples:
Example 1: Let us use the GeeksforGeeks logo to understand sprites in this example.
GFG Logo
In the above image, we have Two G’s and to display a single G we select the image and add the part of this image as the background as shown in the below code snippet:
HTML
<!DOCTYPE html>
< html >
< head >
< title >Page Title</ title >
</ head >
< style >
h1 {
color: green;
}
img {
width: 43px;
height: 45px;
background: url(
0 0 no-repeat;
background-position: -20px -20px;
}
</ style >
< body >
< h1 style = "color:green" > GeeksforGeeks</ h1 >
< h3 >Explain CSS sprites, and how you would
implement them on a page or site.</ h3 >
< img src =
</ body >
</ html >
|
Output:
OUTPUT
Explanation: Steps followed in the above example:
- Add image tag to the HTML body with no src attribute.
- select the image in internal CSS and add the following properties:
img {
width: 43px;
height: 45px;
background: url(“https://media.geeksforgeeks.org/wpcontent/uploads/20220830173608/Screenshot20220830173552.png”)
0 0 no-repeat;
}
With this, we are able to display only the first G of the geeksforgeeks logo.
We can also use these as navigation icons by combining multiple icons as one image. Observe the below example
Example 2: The complete image looks like this:
Example image
Displaying the part of the image as a navigation icon. In the above picture, we have four direction icons combined in a grid of four parts. So instead of making use of four different images, we use the individual icons by referring to the part of the image.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Page Title</ title >
</ head >
< style >
h1 {
color: green;
}
img:nth-of-type(1) {
width: 88px;
height: 70px;
background: url(
0 0 no-repeat;
background-size: 178px;
}
img:nth-of-type(2) {
width: 89px;
height: 70px;
background: url(
0 -78px no-repeat;
background-size: 178px;
}
img:nth-of-type(3) {
width: 89px;
height: 70px;
background: url(
-87px 0 no-repeat;
background-size: 178px;
}
img:nth-of-type(4) {
width: 89px;
height: 70px;
background: url(
-87px -78px no-repeat;
background-size: 178px;
}
img:hover {
cursor: wait;
}
</ style >
< body >
< h1 style = "color:green" >
GeeksforGeeks</ h1 >
< h3 >Explain CSS sprites, and how you would implement
them on a page or site.</ h3 >
< img src =
< img src =
< img src =
< img src =
</ body >
</ html >
|
Output:
Explanation: In the above example we are creating navigation arrows with a single image that shows waiting for the cursor on hover.
- We are creating four instances of the same image
- We are selecting the images with CSS pseudo-classes
- Applying background properties with proper position
Last Updated :
06 Sep, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...