Stack Overflow
Stack Overflow

Questions tagged [css-sprites]

CSS Sprites is a CSS technique to combine small images into one big image and then access them using the background-position property. It is used to save HTTP requests.

CSS Sprites is a CSS technique to combine small images which are used as background-images into one big image and then access them via using offset. It is used to save HTTP requests and additionally in many cases the combined image's filesize is smaller then the sum of all small image's filesize.

For example google.com is using a CSS sprite:

enter image description here

Read more about this technique:

There are also numerous CSS Sprite generators on the web.

FAQs

863 questions
171
votes
15 answers

How can I scale an image in a CSS sprite

In this article, http://css-tricks.com/css-sprites/, it talks about how can I crop off a smaller image from 1 bigger image. Can you please tell me if it is possible/how I can crop off a smaller image and then scale the cropped off region before I…
michael
  • 106,540
  • 116
  • 246
  • 346
161
votes
14 answers

Can I add color to bootstrap icons only using CSS?

Twitter's bootstrap uses Icons by Glyphicons. They are "available in dark gray and white" by default: Is it possible to use some CSS trickery to change the colors of the icons? I was hoping for some other css3 brilliance that would prevent having…
cwd
  • 53,018
  • 53
  • 161
  • 198
160
votes
12 answers

Smallest data URI image possible for a transparent image

I'm using a transparent 1x1 image with a background image, to be able to use sprites and still provide alternative text for some icons. I want to use a data URI for the image to reduce the number of HTTP requests, but what would be the smallest…
Jacob Rask
  • 22,804
  • 8
  • 38
  • 36
127
votes
21 answers

Tools to make CSS sprites?

Are there any good tools to make css sprites? IDEALLY I'd want to give it a directory of images and an existing .css file that refers to those images and have it create a big image optimized with all the little images AND change my .css file to…
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
82
votes
3 answers

Clip/Crop background-image with CSS

I have this HTML:
lorem ipsum
with this CSS: #graphic { background-image: url(image.jpg); width: 200px; height: 100px;} The background image I'm applying is 200x100 px, but I only want to display a cropped portion of the…
Dahie
  • 1,115
  • 1
  • 8
  • 9
62
votes
6 answers

Using sprites with IMG tag?

I understand how to use sprites, however, isn't a "src" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct. Basically, I'd like to omit the SRC for an IMG…
Ryan Peters
  • 7,608
  • 8
  • 41
  • 57
44
votes
4 answers

How to concatenate icons into a single image with ImageMagick?

I want to use CSS sprites on a web site instead of separate image files, for a large collection of small icons that are all the same size. How can I concatenate (tile) them into one big image using ImageMagick?
Peter Hilton
  • 17,211
  • 6
  • 50
  • 75
35
votes
8 answers

Why use a sprite sheet rather than individual images?

One thing I have noticed on some sites is that they use one BIIIIIIIG image containing lots of little images, then use CSS background-position to define the coordinates of each image, rather than use individual images. Here's where I'm at: Cons for…
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
35
votes
7 answers

use CSS sprites for list (
  • ) background image

    • Is it possible to use CSS sprites for the list background image? Normally, I render my sprites with CSS like this: .sprite { background: url(sprite.png) no-repeat top left;} .sprite-checkmark { background-position: 0 -24px; width: 24px; height:…
    Emmett
    • 14,035
    • 12
    • 56
    • 81
    32
    votes
    2 answers

    Compass: generate Sprites, plus width / height on each images in the sprite

    I'm using Compass (a CSS Framework) to generate sprite images. It work, but compass generate only a background-position for each image. Is it possible to get also the width and the height for each image in the sprite? This is my code: @import…
    Etienne
    • 2,257
    • 3
    • 27
    • 41
    31
    votes
    4 answers

    Looking for a good Image Sprite generator tool

    I looking for a decent Image sprite generator. I tried http://spritegen.website-performance.org/ but it's not "smart" enough to handle multiple image dimensions and merge them with few blank spaces between images. Any suggestions???
    João Louros
    • 2,752
    • 4
    • 23
    • 30
    25
    votes
    2 answers

    Why not animated GIF instead of animated CSS sprites?

    In recent trends I've seen people animating CSS sprites using JavaScript instead of using animated GIFs? Ex: http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday (in fact, Google used this technique in other Doodles…
    manikanta
    • 8,100
    • 5
    • 59
    • 66
    24
    votes
    14 answers

    Is using the logo tag in sprites good or bad?

    When building web pages, one of my colleagues displays any logo using the CSS background-image property, rather than embedding the image using an HTML tag. The colleague reported it was to reduce the number of HTTP requests. He also showed me…
    sandeep
    • 91,313
    • 23
    • 137
    • 155
    24
    votes
    3 answers

    Border-radius bleeding

    I want to give border-radius to a
    Enrique Moreno Tent
    • 24,127
    • 34
    • 104
    • 189
    22
    votes
    4 answers

    Do I still need to pad images in a CSS Sprite?

    In CSS Sprites you will often find padding between each image. I believe the idea is so that if the page is resized then one image won't bleed into another. I think this depends on the different types of browser zoom (best explained by…
    Simon_Weaver
    • 140,023
    • 84
    • 646
    • 689
    1
    2 3
    …
    57 58