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
21
votes
3 answers

align icons with text

What's the best way to align icons (left) and text (right) or the opposite text on left and icon on right? Does the icon image and text have to be the same size? Ideally I would like them to be different but be on the same vertical alignment. I am…
badnaam
  • 1,876
  • 4
  • 29
  • 53
18
votes
8 answers

When is a CSS Sprite too large?

Is the main purpose of sprites to reduce http requests made to the server for graphical elements on a page? Or do you want to try and fit as many elements to the sprite as possible. I guess what I'm asking is: when is the sprite too large?
Graham
  • 1,145
  • 4
  • 16
  • 25
18
votes
5 answers

Using Css Sprites and background position

I have a div element, say of width 200px and height 200px. I need a small image to appear on the top right corner of the div. How one would normally do it would be with background: url(/images/imagepath.png) top right; However the problem is, I am…
Maxim Dsouza
  • 1,507
  • 3
  • 19
  • 32
18
votes
4 answers

IE6: Background-Image Load Event

I am displaying a bunch of thumbnail images and the latency can be very high (over a VPN) so I send all the thumbnails in a single file (like a sprite) and set the CSS background-image and background-position properties of a div to show the…
toby
  • 885
  • 3
  • 10
  • 21
18
votes
7 answers

CSS - using one background image with multiple images on it

I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in…
Roman
  • 183
  • 1
  • 1
  • 4
17
votes
3 answers

Are there limits to how tall/wide CSS Sprite-maps can be?

Let me start off by stating that I realize the arguments against doing CSS Sprites for large images. I even asked a question about why that could be considered a bad idea (and added an answer of my own). Now that we've had that talk... I'm going to…
Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
17
votes
2 answers

CSS: using image sprites with css pseudo classes :before and :after

I have never tried that before. I created an image sprite that is contains two icons. Each icon is 26px wide and high. So the sprite is 26x52px. I have an element that is either in a div.something or in a div.anything. Depending on which class it's…
matt
  • 42,713
  • 103
  • 264
  • 397
17
votes
2 answers

CSS Sprites and repeating backgrounds

I'd like to keep all my small images in one sprite file, for example: Now suppose I want to add a thin background image which is meant to repeat-x over 100% the width of an element: Does this have to be stored as a seperate entity, or can I…
Tom Gullen
  • 61,249
  • 84
  • 283
  • 456
16
votes
3 answers

How to apply CDN speedup techniques to icons?

It has become common practice to use CDNs for caching javascript, css, font's and more... however this does not appear to extend to icons to the same extent (possibly because each site prefers to have a unique look and feel?) Are there widely used…
MechanisM
  • 906
  • 8
  • 14
16
votes
2 answers

Maximum image dimensions in a browser/CSS spec?

I want to display a page containing about 6000 tiny image thumbnails (40x40 each). To avoid having to make 6000 HTTP requests, I am exploring CSS sprites, i.e. concatenating all these thumbnails into one long strip and using CSS to crop the required…
jl6
  • 6,110
  • 7
  • 35
  • 65
16
votes
6 answers

IE9/8/7 css sprite position slip issue

I want to css sprite (sprite image total width:45px and total height:15px consists of three image ) but there is a problem in IE9/8/7. link and hover work but when click the button (active) sprite image slipping to left 1px. issue for only IE…
midstack
  • 2,105
  • 7
  • 44
  • 73
16
votes
3 answers

Are image sprites actually more efficient than separate images?

I started using image sprites around 2 years ago because I saw sites such as Apple and Facebook using them on their sites. It goes without question that loading a page is faster if you download one 60kb image, instead of three 20kb images, however,…
Ben Carey
  • 16,540
  • 19
  • 87
  • 169
15
votes
6 answers

What are the advantages of using CSS Sprites in web applications?

I'm working on a website with reasonably heavy traffic and I'm looking into using a CSS sprite to reduce the number of image loads in its design. Are there any advantages to using a CSS sprite besides reducing the amount of transmitted data? How…
Dean Putney
  • 745
  • 8
  • 22
13
votes
5 answers

How do CSS sprites speed up a web site?

I'm trying to understand how CSS sprites improve performance on a site? Why is the downloading of several small images slower than the download of a single image holding the smaller images if the total size of the single image is the sum of the…
Guy
  • 65,082
  • 97
  • 254
  • 325
13
votes
2 answers

Under what circumstances would loading images individually with HTTP/2 be slower than loading all images at once with a sprite a la HTTP/1.1?

HTTP/2 makes it possible to multiplex connections, eliminating the need for more than one connection to a server. Over a single connection, many individual images can be sent down to the client. This obviates the old image sprite pattern of…
Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50
1
2
3
…
57 58