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
1 answer

CSS Icons & Sprites & Navigation

I'm creating a little navigation system and though I'd try my hand a CSS sprites... My HTML is as follows
0
votes
2 answers

what is the ultimate solution for png transprant when using css sprite in ie<7

Suppose I have this element which will use the css sprite with the whole image:icon.png(80x120):
Normally,I use this: .sprite{ background-image:url('icon.png'); background-position:0px -20px; width:20px; …
hguser
  • 35,079
  • 54
  • 159
  • 293
0
votes
1 answer

Make CSS background-position reference an image from right to left

I know the typical way to use a sprite with background-position is to reference the images in the sprite using the upper left hand corner and provide negative coordinates. I have a rounded rectangle that I am using for buttons and I want to provide…
Adam
  • 4,590
  • 10
  • 51
  • 84
0
votes
1 answer

How to add an icon near a GWT menuItem (UI binder code prefered)?

Maybe it is very simple, but I did found the solution. I just want to have an image (as simple as a "black triangle") near a menu item. If it is possible with UI binder, it would be better. I just know there is the .setHTML(html) function... I would…
user662264
0
votes
2 answers

Optimise Sprite CSS for multiple images

Had a few problems getting background-image displaying in Firefox, I made it work but was surprised at how bloated the CSS became. It now works great, but I need to replicate base CSS code for multiple images. Can anyone tell me if it is possible…
KenAshton
  • 109
  • 1
  • 11
0
votes
3 answers

W3C validation of css sprite back button?

How can I make my css sprite back button validate through W3C? Here is my code to call the button.
yaksushi
  • 63
  • 1
  • 11
0
votes
2 answers

CSS sprite active state no working?

can anyone help me find out what the problem is? I'm trying to make the active state of the css sprite work. At the moment, it is not doing anything HTML
0
votes
2 answers

CSS styled lists UL LI - ( sprites ) loading jumpy

Thanks everyone for taking the time to read this. I have styled my navigation bar and a few other things on my website using lists. For example...
0
votes
1 answer

Compass smart sprite layouts

According to documentation http://compass-style.org/help/tutorials/spriting/sprite-layouts/ There is a way to create 'smart' sprite layout, because I'm not satisfied with vertical one. hello.sass @orange-layout:smart @import "orange/*.png" @include…
Eugene Nagorny
  • 1,626
  • 3
  • 18
  • 32
-1
votes
6 answers

Using CSS sprites on a HTML page

I have browsed all the how-tos about CSS sprites and although some of them are helpful, absolutely none explain how exactly to use the CSS class to display an image in a HTML page. This is my CSS code, it has two…
Dan Horvat
  • 800
  • 3
  • 14
  • 27
-1
votes
3 answers

show div on hover and stay till mouseleave?

when hovering on ".socialIcons", i want the div ".socialIconsShow" to fade in, and when I move the mouse to hover over ".socialIconsShow" they fadeout. Is there a way to have the icons stay visible after leaving ".socialIcons"?
kamalo
  • 186
  • 3
  • 10
-1
votes
1 answer

How to deal with CSS sprite (using background-position) issue causing blurry images on mobile devices?

Firstly, when using CSS with normal image, we set width:50px and this applies OK on both desktop and mobile devices (of course the image quality and natural size is high enough). However when using CSS sprite with a simple trick with…
Hopeless
  • 4,397
  • 5
  • 37
  • 64
-1
votes
1 answer

Centering a sprite as div background

I have a button consisting of a sprite set as the background image of a div. The sprite sheet is arranged horizontally. Note that the source image is also being scaled down to fit the div. .button { background: url(sprite.png); …
Igid
  • 515
  • 4
  • 15
-1
votes
1 answer

design sprit icons for big site

what is the best for design full icons and images sprite for big site.. before UI Development or after ?
Abudayah
  • 3,816
  • 7
  • 40
  • 60
-1
votes
1 answer

Image change on hover from a stitched image

I have a image that is created to have 4 images in one See this image Now, what I am trying to do is get the css to load just the first square at the top. Then when a user hovers over that image it will switch between all four images. So it will…
Steven Kiberton
  • 43
  • 3
1 2 3
…
57 58