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 Sprite: Setting sprite image for several categories

I am currently working with css sprite images for my site. But I am running into css styling issues. I have 6 categories with each having an image beside. When applying the image sprite I get repeated images of the same object. How can I get each…
user1434156
0
votes
2 answers

How to reduce the number of sprites when using css sprite technique

I notice that the file size of CSS sprite (.gif) keep growing over the period. That is because we keep adding new icons / sprites, and we never remove the existing sprites, because we are afraid of breaking existing design (offset recalculation or…
janetsmith
  • 8,562
  • 11
  • 58
  • 76
0
votes
1 answer

CSS Sprite Hover Positioning

I am trying to build a simply navigation that has rollover states and different icons for each item. I am using 3 different sprites for the on/off states for the icons and I have everything working great except I am having trouble positioning the…
Deep Rooted
  • 245
  • 3
  • 4
  • 19
0
votes
1 answer

DIV positioning issue

After adding the karate image on this page it cuts off some chunks off the logo. I tried using z-index and negative margins, yet it didn't solve the problem. I'd the logo to stay on top of the karate image. The CSS is as shown below: #rack #header…
Dz.slick
  • 433
  • 1
  • 5
  • 19
0
votes
1 answer

How to specify the position in both CSS sprite and element's background

I want to show part of a sprite image positioned at X and Y at the upper right corner of a div element. How should I do? For example, if I usebackground: url("the path") no-repeat 0 0 it will show the whole sprite image at the upper right corner of…
chaonextdoor
  • 5,019
  • 15
  • 44
  • 61
0
votes
3 answers

sprite images using

I have an image which is made up of 2 images, a sprite. What I'm looking to do, is have this as a sprite, so when I hover over it, the bottom part of the image is visible. I know I can do this using background-position in CSS, but this is an …
terrid25
  • 1,926
  • 8
  • 46
  • 87
0
votes
2 answers

HTML 5 - very simple animation

I need to understand how to create a simple animation in HTML 5 or CSS3. Suppose you have this sprite (see picture) and you need to create an animation with 4 frames. The animation has to last exactly 1 second. I don't want a smooth animation…
Duck
  • 34,902
  • 47
  • 248
  • 470
0
votes
2 answers

CSS sprite position

I have a link, with which i want use plus, which will change color on hover. But in the past hour i cant figure out how to do this trick with spites. Here is a link, nothing special Find Out More! My css…
NoNameZ
  • 785
  • 4
  • 14
  • 22
0
votes
1 answer

Why does the the sprite image only appear if I assign the property display to the CSS declaration?

I have the following code a.rollover { background-image: url('sprite.jpg'); display: block; width: 191px; height: 143px; } However it only appears if I include the property display and set it to block. If I…
PeanutsMonkey
  • 6,919
  • 23
  • 73
  • 103
0
votes
3 answers

Arranging buttons side by side

please help me arrange these 3 buttons horizontally like this photoshopped image: Please take a look at the code here. CSS: a.facebookbt { background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat 0 0; width:…
Shyam Sundar
  • 47
  • 1
  • 9
0
votes
1 answer

Background sprites with transparency changed with :hover and :active overlays instead of redraws

All right, so this is only a test example (not polished) of something I was working on for a project. Let's say you have an image being used for navigation set as the background for an element, that image has transparency, and when it is changed,…
dizzylizzy
  • 13
  • 2
0
votes
1 answer

Internet Explorer 9 displaying CSS sprite image, but with strange content

I've got an image sprite that I'm using, but IE9 isn't displaying it properly. It works fine in Firefox, but displays the grey border and symbol over top the image (as shown). It also doesn't quite work in Chrome - it displays the image, but has the…
arthur.e.anderson
  • 467
  • 7
  • 14
0
votes
2 answers

CSS sprite - Moving background for navigation (hover, active, etc) + spaces between elements

I'm doing a navigation menu with CSS sprite where instead of uploading a lot of images, you merge them all together and can see hover, active effects by moving background position, i.e.…
IgnasK
  • 384
  • 2
  • 19
0
votes
1 answer

Pseudo-Random image via CSS-sprite (random location)

I want a header image in my HTML to be random. I have accomplished this by using this php file, however I would like to do something different. I want to have the random images be a part of one sprite. That way the images can all load at the same…
michaellindahl
  • 2,012
  • 5
  • 36
  • 64
0
votes
2 answers

cannot get css sprite working with background-repeat

I try to get css sprite working on my page. but if I adds background-repeat:no-repeat. then the css sprite stops working. If I remove it from my stylesheet, will work again. I couldn't figure out why I cannot use background-repeat. here's my code. …
qinking126
  • 11,385
  • 25
  • 74
  • 124
1 2 3
…
57 58