- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
Advantage of Using CSS Image Sprite
The main advantage of using image sprite is to reduce the number of http requests that makes our site’s load time faster. The images also load faster making switching from one image to another on some event much smoother. Image Sprite are a collection of images placed into a single image.
Following is the code showing the image sprite advantage using CSS −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter,.facebook {
background: url(sprites_64.png) no-repeat;
display:inline-block;
width: 64px;
height: 64px;
margin:10px 4px;
}
.facebook {
background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>Output
The above code will produce the following output −
Above, we have set image sprite using the following −
.twitter,.facebook {
background: url(sprites_64.png) no-repeat;
display:inline-block;
width: 64px;
height: 64px;
margin:10px 4px;
}
.facebook {
background-position: 0 -148px;
}
- Related Articles
- Display an Icon from Image Sprite using CSS
- Creating a Navigation Menu using CSS Image Sprite
- Vertical alignment of an image using CSS
- Setting Background Image using CSS
- Adding a mask to an image using CSS
- Center image using text-align center with CSS?
- Role of CSS Image Sprites
- How to set background image in CSS using jQuery?
- Set the height and width of an image using percent with CSS
- How is rayon made? Give one advantage of using rayon.
- How to place text blocks over an image using CSS?
- How to Create a Black and White Image Using CSS
- CSS border-image property
- CSS border-image-slice
- CSS border-image-source
Advertisements