Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Creating a Navigation Menu using CSS Image Sprite
CSS image sprite is a technique that combines multiple images into a single image file to reduce HTTP requests, making your website load faster. By using CSS background positioning, you can display specific parts of the sprite image for different navigation elements.
Syntax
.element {
background: url("sprite-image.png") x-position y-position;
width: element-width;
height: element-height;
}
Example
The following example demonstrates how to create a navigation menu using CSS image sprite −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
background-color: #f0f0f0;
}
nav {
background-color: #333;
height: 60px;
padding: 10px;
display: flex;
align-items: center;
gap: 20px;
}
nav .nav-item {
display: flex;
align-items: center;
gap: 8px;
}
nav a {
font-size: 16px;
color: white;
text-decoration: none;
}
nav a:hover {
color: #4CAF50;
}
/* CSS Sprite Classes */
.home, .search, .phone, .user {
width: 32px;
height: 32px;
display: inline-block;
background-image: url("/css/images/css_sprites.png");
}
.home {
background-position: -62px -62px;
}
.search {
background-position: -10px -62px;
}
.phone {
background-position: -62px -10px;
}
.user {
background-position: -10px -10px;
}
</style>
</head>
<body>
<nav>
<div class="nav-item">
<span class="home"></span>
<a href="#">HOME</a>
</div>
<div class="nav-item">
<span class="phone"></span>
<a href="#">Call Us</a>
</div>
<div class="nav-item">
<span class="user"></span>
<a href="#">Our Team</a>
</div>
<div class="nav-item">
<span class="search"></span>
<a href="#">Search</a>
</div>
</nav>
<div style="padding: 20px;">
<h1>Main Content Here</h1>
<p>This navigation menu uses CSS sprites to display icons efficiently. Each icon is positioned using background-position to show the correct part of the sprite image.</p>
</div>
</body>
</html>
A dark navigation bar appears with four menu items (HOME, Call Us, Our Team, Search), each with its corresponding icon displayed using CSS sprites. The navigation has a modern layout with proper spacing and hover effects.
Key Points
- Background Position: Use negative values to position the sprite image correctly
- Dimensions: Set exact width and height for each sprite element
- Performance: Reduces HTTP requests by combining multiple images into one
- Maintenance: Easier to manage multiple icons from a single image file
Note: The sprite image (css_sprites.png) should contain all the icons arranged in a grid pattern. Measure the exact positions of each icon to set the correct background-position values.
Conclusion
CSS image sprites are an effective technique for creating efficient navigation menus. By combining multiple icons into one image and using CSS background positioning, you can significantly improve your website's loading performance while maintaining a clean, organized navigation design.
Updated on: 2026-03-15T15:04:04+05:30
661 Views
Advertisements