Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is CSS sprites and how to implement them on a page?
What are Sprites in CSS?
In CSS, sprites are techniques used to which we can use to decrease the number of HTTP requests by the web browser. In this technique, we require to combine multiple images in a single image. After that, we can set the single image for every image element’s background and also required to set the position to show the particular image from the combined image.
Here, we can combine the different images in a single image using the image editing tools such as Photoshop, paint, etc. After that, we can use that single image with different background positions to show the different images on the web page.
Why Should we use Sprites?
The main benefit of using the CSS sprites is that it reduces the total number of HTTP requests. Also, rather than downloading multiple images, browsers require to download a single image which saves the bandwidth of the web page.
So, it improves the web page loading speed and performance as it saves bandwidth.
Let’s understand how to use CSS sprites via different examples.
Example 1
In the example below, we have taken the TutorialPoint website’s logo image. It contains the ‘t’ in the art format and ‘tutorialspoint’ in the text format.
Here, we will show the logo icon and text separately from the single image. We have two div elements named first and second, and we have set the different dimensions for both div elements and the same background image. After that, we set the background position to show the logo icon and text as a different image.
<html>
<head>
<style>
.first {
width: 70px;
height: 69px;
background: url('https://www.tutorialspoint.com/static/images/logo.png?v2') 0 0 no-repeat;
background-position: -10px 7px;
}
.second {
margin-top: 20px;
width: 270px;
height: 69px;
background: url('https://www.tutorialspoint.com/static/images/logo.png?v2') 0 0 no-repeat;
background-position: -78px 7px;
}
</style>
</head>
<body>
<h3> Using the <i> CSS sprites </i> to use the multiple images from single combined images </h3>
<h4> The original image is as shown below. </h4>
<img src = "https://www.tutorialspoint.com/static/images/logo.png?v2" alt = "logo">
<h4> After dividing the image into two halves. </h4>
<div class = "first"> </div>
<div class = "second"> </div>
</body>
</html>
Example 2
In this example, we have taken a single combined image containing the 5 different nature images. Here, we are creating an image gallery in which we want to show the different images, and we have added multiple div elements inside the ‘gallery’ div.
In CSS, we set the dimension for every div element and set the same combined background image. After that, we adjusted the position of the background image using the ‘background-position’ property, so it shows every image separately.
<html>
<head>
<style>
img {
width: 200px;
height: 200px;
}
.gallery {
display: flex;
flex-wrap: wrap;
height: 1000px;
justify-content: space-around;
}
.image1 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: 0px 0px;
}
.image2 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: -560px 0px;
}
.image3 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: -10px -500px;
}
.image4 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: -300px -500px;
}
.image5 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: -600px -500px;
}
</style>
</head>
<body>
<h3> Using the <i> CSS sprites </i> to use the multiple images from single combined images </h3>
<h4> The original image is as shown below. </h4>
<img src = "https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924" alt = "nature">
<h4> After implementing the CSS sprites. </h4>
<div class = "gallery">
<div class = "image1"> </div>
<div class = "image2"> </div>
<div class = "image3"> </div>
<div class = "image4"> </div>
<div class = "image5"> </div>
</div>
</body>
</html>
Example 3
Here, we have combined all social media icons in a single image. After that, we have created the unordered list to show all social media icons from the combined image. In the list, we have added the ‘<a>’ tag, and inside that, we have used the ‘div’ element, which will contain the social media icon as a background.
In CSS, we have to give some dimensions to every icon first. Also, we have set the dimensions of the background image. Furthermore, we have set the background position to show every social media icon separately.
In the output, users can click on any social media icon, and it will redirect to the respective web page.
<html>
<head>
<style>
img {
width: 500px;
height: 300px;
}
.social {
display: flex;
flex-wrap: wrap;
width: 450px;
justify-content: space-around;
}
.facebook,
.instagram,
.twitter,
.linkedin,
.youtube,
.whatsapp,
.tiktok {
width: 100px;
height: 100px;
background: url('https://static.vecteezy.com/system/resources/previews/003/600/947/original/set-of-social-media-icon-in-round-bakground-free-vector.jpg') 0 0 no-repeat;
background-size: 400px 300px;
}
.facebook { background-position: 0px -38px;}
.instagram { background-position: -95px -35px;}
.twitter {background-position: -190px -35px;}
.linkedin {background-position: -280px -165px;}
.youtube {background-position: 0px -165px;}
.whatsapp {background-position: -190px -160px;}
.tiktok {background-position: -280px -38px;}
ul {display: flex; flex-wrap: wrap;justify-content: space-around;}
li {list-style: none;}
</style>
</head>
<body>
<h3> Using the <i> CSS sprites </i> to use the mutiple images from single combined images </h3>
<h4> The original image is as shown below. </h4>
<img src = "https://static.vecteezy.com/system/resources/previews/003/600/947/original/set-of-social-media-icon-in-round-bakground-free-vector.jpg" alt = "Social media icons">
<h4> After implementing the CSS sprites. </h4>
<div class = "social">
<ul>
<li> <a href = "https://www.facebook.com/">
<div class = "facebook"> </div>
</a>
</li>
<li> <a href = "https://www.instagram.com/">
<div class = "instagram"> </div>
</a>
</li>
<li> <a href = "https://www.twitter.com/">
<div class = "twitter"> </div>
</a>
</li>
<li> <a href = "https://www.linkedin.com/">
<div class = "linkedin"> </div>
</a>
</li>
<li> <a href = "https://www.youtube.com/">
<div class = "youtube"> </div>
</a>
</li>
<li>
<a href = "https://www.whatsapp.com/">
<div class = "whatsapp"> </div>
</a>
</li>
<li>
<a href = "https://www.tiktok.com/">
<div class = "tiktok"> </div>
</a>
</li>
</ul>
</div>
</body>
</html>
Users learned to use the CSS sprites to show multiple images from a single combined image. Mainly, we should use the CSS sprites to improve the web page performance as we require to download only one large file rather than multiple single files. In the second example, we created a gallery, but users can also create a slideshow of the image using the same technique.
98 Views
To Continue Learning Please Login