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

CSS Sprite techniques, css background or img's clip

There are two image sprite techniques. The "classic" version uses the background and the background-position css properties. (as it's described here http://www.alistapart.com/articles/sprites) The "second" version uses an image tag and its clip css…
Viktor
  • 6,739
  • 7
  • 26
  • 29
12
votes
4 answers

CSS Sprites browser rendering

We all know that CSS sprite images are great to reduce the amount of requests and such, but what about the performance of the browser rendering the page with several elements using a big image as a background?
Bernardo Botelho
  • 686
  • 5
  • 15
12
votes
1 answer

Firefox and Chrome stops displaying my sprite after 655 images

the problem Hi, i'm working with sprites and got some interesting behavior of firefox and Chrome. When my sprite have 655 images or less, my sprite works fine. But when it goes furter (656 or more) it doesn't get displayed (just become invisible).…
Hugo Mota
  • 11,200
  • 9
  • 42
  • 60
12
votes
3 answers

How can I make a DIV behave like an IMG for use as a CSS sprite?

I have written code that automatically creates CSS sprites based on the IMG tags in a page and replaces them with DIV's with (what I thought was) appropriate CSS to position the sprite image as a background letting the appropriate part show through…
John
  • 14,944
  • 12
  • 57
  • 57
11
votes
6 answers

Do CSS Sprite images have to have X amount of space between each item?

I am having a problem, for a while I have been trying to figure out how to resolve this issue. I will describe it very well below... I am trying to use an image as a sprite image for an UL list. It should show an icon with text next to it, both…
JasonDavis
  • 48,204
  • 100
  • 318
  • 537
11
votes
3 answers

Efficiency of and

I want to ask if someone can give me some hints with a design decision I want to make. My project will feature some sprites (expecting 10 to 30 on the screen at once), and there are several ways to implement them. One way would be CSS-Sprites,…
Lanbo
  • 15,118
  • 16
  • 70
  • 147
11
votes
6 answers

Why not sprite larger images that are page content?

The typical rule of thumb when it comes to using CSS sprites for images is that you should only do it for smaller images (like icons) and that actual image content should always be represented through elements. My question is: why? Aren't the…
Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
11
votes
4 answers

When zooming on Chrome, image sprite becomes misaligned

On Chrome when you zoom, the icons with an image sprite become misaligned. The position seems to drop slightly as you go farther down the background image. This only happens in Chrome. Here's the CSS. .feature-icon { height: 22px; width:…
Nathaniel S
  • 325
  • 2
  • 11
11
votes
3 answers

Best practices for CSS sprite image

I was looking around to find some best practice and hints when building css image sprite. The questions: Consider a site with lots of images: Should I group and put images with approximately same size in one png? What is the acceptable sprite…
Alireza Fattahi
  • 42,517
  • 14
  • 123
  • 173
11
votes
6 answers

Is css-sprite a good technique?

is css-sprite good technique? I read about its pros at http://spriteme.org/ and have also I seen a lot of questions about css sprites here in stackoverflow. What are its cons? Will it work in all browsers as claimed in their site?
rajakvk
  • 9,775
  • 17
  • 46
  • 49
11
votes
2 answers

How to remove or disable before and after pseudo classes?

This seems very trivial but I couldn't figure it out. Simply overriding it with display:none doesn't work on IE8. #selector::after { display: none; } I am modifying a theme that's using before and after pseudo classes to add image sprites.
jilseego
  • 1,083
  • 5
  • 13
  • 21
11
votes
8 answers

jQuery toggle to change image

I have a list of divs with images in them:
<%= image_tag("sources/pix/nyt.png") %>
<%= image_tag("sources/pix/theguardian.png") %>
When a user clicks the div, I'd like it to change the…
hejog
  • 163
  • 1
  • 2
  • 9
10
votes
5 answers

CSS-only: How can I center fixed width div between two divs that fill the remaining space?

JSFIDDLE EDIT: Trying to achieve the opposite of this.(instead of 2 fixed-width divs on the sides and one fluid-width div in the middle,I'm trying to get 2 fluid-width divs on the sides and one div centered in the middle) I have 3 divs: A, B, and…
MicronXD
  • 2,190
  • 16
  • 24
9
votes
5 answers

How can I apply CSS style changes just for one page?

I have two css files: A main file (main.css) A specific page file (page5.css). My page.css contains main.css (@import url(main.css));) My main.css has this as one part of it that sets the height of the page #content { …
Asim Zaidi
  • 27,016
  • 49
  • 132
  • 221
9
votes
3 answers

Single image file to store all the little images on a page

In one of the recent Stackoverflow podcasts, Jeff talked about having a single image file having all of those tiny images that are all over a page and then cutting it with CSS so that all the images get displayed correctly. The whole point is to…
Tamas Czinege
  • 118,853
  • 40
  • 150
  • 176
1 2
3
…
57 58