HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
Core PHP

How to Create CSS Image Sprites

In this article, you will learn How to Create CSS Image Sprites.

Example:-

<html>
<head>
<title>CSS Image Sprites</title>
<style>
#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('home.png') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('pre.png') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('next.png') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
  <li id="home"><a href="https://huboftutorials.com/"></a></li>
  <li id="prev"><a href="https://huboftutorials.com/category/jquery"></a></li>
  <li id="next"><a href="https://huboftutorials.com/cascading-stylesheet"></a></li>
</ul>
</body>
</html>

Read on Facebook

 

css background image css image how to add a background image in css image combiner sprite sprite image
How to create AJAX with PHPPrevHow to create AJAX with PHPMarch 16, 2020
How to Create Chaining in jQueryMarch 16, 2020How to Create Chaining in jQueryNext

Leave a Reply

Your email address will not be published. Required fields are marked *

Search
Recent Posts
  • 7 Educational Approaches for Diverse Learners
  • 5 Best Online Payment Gateways in India
  • How to Start and Earn from Making WooCommerce Plugins
  • Step By Step Guide to Becoming a Certified Salesforce Developer
  • A Guide to Transitioning from On-Premises to Azure Services
Categories
  • Business
  • Core PHP
  • CSS
  • Digital Marketing
  • HTML
  • JAVA
  • Jobs
  • jQuery
  • Mysql
  • News
  • Others
  • Photography
  • Projects
  • Recipes
  • WordPress

  • How to Create List in HTML
  • How to use Iframe in HTML
  • How to Create a Table in HTML and CSS
  • How to Add New HTML Content using jQuery
  • CSS Property of List tag in HTML
  • How to use CSS for Table in HTML
  • How to Make Basmati Rice Recipe
  • How to Make Indian Kheer Recipe
  • How to Make Spicy Aloo Tikki
  • How to Make Aloo Matar Samosa
  • How to Make Cheese Potato Sandwich
  • How to Make Aloo Palak Methi
  • Company Visitors Management System
  • Complaint Management System using PHP
  • Directory Management System
  • Employee Record Management System
  • Hospital Management System using PHP
  • Vehicle Parking Management System

Copyright © 2022 Hub of Tutorials. All Rights Reserved. Designed by AS Webworks