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

Create CSS sprites based on colour?

I have a large set of thumbnails I wish to display on a page (over 200). I'd like to use CSS sprites to load them to minimise the HTTP requests. I think putting all of them in one massive file is a bad idea, but splitting them into about 6 files of…
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
0
votes
1 answer

take image from sprite and put it in tag

I have 2 kind of , one is I have a sprite image with 10 circles in different colors. What I need to do is to put only the green circle in . the size…
shlomi
  • 523
  • 3
  • 13
  • 26
0
votes
1 answer

Transition using css3 sprites

I want to just fade in and fade out the images(sprite) using css3..The below code gives transitions to all images.Help me to fade in and fade out the below images in a css sprite. HTML CODE
Tabraiz Ali
  • 677
  • 9
  • 36
0
votes
1 answer

Skeuomorphic switch CSS3 sprite animation only works half the time

My sprite animation works perfectly on the odd clicks (1, 3, 5 . .) which puts the switch in the down position, but I can't get the even clicks(2, 4, 6. . .) to fire the animation that puts the switch in the up position. Cross browser CSS removed…
coreballs
  • 336
  • 1
  • 3
  • 9
0
votes
1 answer

problems with sprites showing up on button

I've tried so many things I can't figure out why the sprites aren't showing up. There are 3 states for the button: normal, hover, and active. #continue_btn { float: right; margin-right: 15px; width: auto; width: 229px; height:…
JulieBrescia
  • 5
  • 3
0
votes
0 answers

how to generate sprite with fewest empty space using compass sass?

how to generate sprite with fewest empty space using compass sass? I can not find any setting option to get smart layout for sprit-map function. but I find that $dropcap-layout:smart @import "dropcap/*.png"; can do the job. but not for sprite-map…
linjuming
  • 2,117
  • 4
  • 23
  • 32
0
votes
3 answers

Symfony2 and Assetic - Images referenced in my CSS won't load

I have a CSS sprite sheet I'm trying to use, but my CSS file cannot 'see' the image. I've followed the answer provided here to no avail. My bundle structure is: src/ vendor/ project/ bundle/ Resources/ …
Major Productions
  • 5,914
  • 13
  • 70
  • 149
0
votes
1 answer

http requests and file sizes

Hi all I'm in the process of finding out all about sprites and how they can speed up your pages. So I've used spriteMe to create a overall sprite image which is 130kb, this is made up of 14 images with a combined total size of about 65kb So is it…
crazy sarah
  • 611
  • 4
  • 13
  • 29
0
votes
2 answers

Cannot show part of css sprite image

I am trying to get css sprites to work. My image consists of two parts. The left part is black and the rigt part is white. The code below shows the white part of the image. If i change the -40px value to 0 in #item0, it displays the both the black…
Tony
  • 1,394
  • 5
  • 22
  • 48
0
votes
3 answers

Fixing CSS sprite on hover

I have setup css sprites for social icons on the footer of following page: http://www.javaexperience.com/ The problem is that I want to change background color on hover but then the image gets hidden. Following is the CSS code for the 4 social…
Piyush-Ask Any Difference
  • 4,294
  • 5
  • 46
  • 92
0
votes
1 answer

Is there an effective way to serve specific thumbnail images to fetcher bots?

My site uses some aggressive caching techniques to keep requests to a minimum, among them being: .htaccess redirects to cached HTML files; Automatic merging of content images into CSS sprites. This works great for human traffic, but when an…
Alan Bellows
  • 1,781
  • 1
  • 14
  • 21
0
votes
1 answer

Sprite only partially shown

I attempted to make a sprite image for the bottom of my asp.net home page, to reduce the number of http requests. I looked at all the coding, and can't find any errors. Here is the image: But for some reason, my google+ image doesn't show up; it…
Jason Weber
  • 5,653
  • 6
  • 40
  • 73
0
votes
3 answers

What are the advantages of using sprites over individual images?

I recently noticed that every image on this website - the logo, badge colors, up/down voting arrows — the list goes on - are actually part of a single sprite sheet, set as a background image, and repositioned based on the required state. What is the…
Jules
  • 14,200
  • 13
  • 56
  • 101
0
votes
1 answer

Sprite with complicated positioning case

When I replace background image mbg.jpg,mbgg.jpg,mbgr.jpg,mbgh.jpg with sprite image sprite_mbg.png and also add background-position to css of input, the button color become mixing due to the width and position. /*Sprite Image generated by Instant…
user1732217
  • 67
  • 1
  • 7
0
votes
2 answers

Preloading css sprites

I have a css file with the following reference to chess.svg. Is there a simple way to get the chess.svg sprite and other css images to start downloading without having to first wait for the entire css file to download? If it matters I am using Ruby…
user782220
  • 10,677
  • 21
  • 72
  • 135
1 2 3
…
57 58