How to Create CSS Image Sprites

How to Create CSS Image Sprites

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


<title>CSS Image Sprites</title>
#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;
<ul id="navlist">
  <li id="home"><a href=""></a></li>
  <li id="prev"><a href=""></a></li>
  <li id="next"><a href=""></a></li>

Read on Facebook


Leave a Reply

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