Best Way to Sprite Images

What is the best way to do an inline image sprite?

I believe my way as described above is the best way to load an image sprite.

I added only the CSS needed to view that sprite and left all other CSS in the StyleSheet where it belongs.

While the true source of the image is a transparent GIF whether you use an actual gif or the data equivalent in my example above the sprite image is set as the background and offset to reveal the needed sprite.

It makes it possible to use the img tag for it's intended purpose: such as the alt attribute, and the tag's default inline display.

A single image tag with certain inline css is a lot less html than anything else I have seen and semantic html can be added where needed.

Tools to make CSS sprites?

This will do 90% of the work for you: CSS Sprite Generator. You'll still need to edit the rules yourself, but the tool will give you the code fragments you need for the new CSS file.

Css Sprite question, is there a better way?

You could combine the selectors like so.

#logo-link,#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active,#logo-link2:hover,#logo-link2:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

Alternatively you could add a class called sprite

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
.sprite:hover,.sprite:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

And the html

<a href="link1.html" id="logo-link" class="sprite"> </a>

<a href="link2.html" id="logo-link2" class="sprite"> </a>

Edit: Here is another alternative if you plan on using a sprite sheet.

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(spritesheet.png);
}
.analytics{background-position:0 0;}
.analytics:hover{background-position:0 0;}
.addlisting{background-position:0 0;}
.addlisting:hover{background-position:0 0;}

HTML:

<a href="link2.html" class="sprite addlisting"> </a>

And a jsfiddle
http://jsfiddle.net/gJkCZ/

Using Css Sprites and background position

You need to specify the coordinates for your element position and the background position in two different ways.

#yourimage {
  background-image: url(/web/images/imagepath.png);
  /* background coordinates */
  background-position: -215px -759px;

  /* element coordinates */
  position:absolute;
  left: 0;  /* 0px from the left */
  top:  0;  /* 0px from the top  */
}

With the background-position you specify the background coordinates. For the coordinates of your element, you need to set the left and right properties.

Keep in mind that in order to use sprites, your element must be of the correct size. The image you are using as a background must have enough space to cover the width and height of the element, not more, otherwise you will see more than one image from your sprites image.

If you want to display a image smaller than your element, you need a smaller element inside the big one.

<div id="container">
  <div class="background"></div>
  my content here
</div>

Then in your CSS

#container {
  position:relative;
  width: 200px;  /* size of your big element */
  height: 200px;
}
#container .background {
  background: url(/web/images/imagepath.png) -215px -759px;
  width:  50px; /* width and height of the sprite image you want to display */
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

---

Related Topics