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

Bootstrap 3.3.7 .Img-thumbnail border makes image dissappear on mobile phones

I have a rather strange issue where the 1px border added to the img-thumbnail class in bootstrap is making my image disappear on mobile phones. Removing this my image appears fine. Also if I try using a smaller sized image it works. The image in…
Vaishal Patel
  • 399
  • 4
  • 24
-1
votes
1 answer

Is there a solution to sprite images on
  • that change in size?

    • I want to use sprites instead of bullets or for my
  • but when the browser window resizes the
  • which is filled with text stretches and other sprite images bleed into view. Is there a way around this problem without spacing out the images…
    • Cypher
    • 1
    • 5
    -1
    votes
    2 answers

    placing large image sprite in small div and adapt according to window resize

    .icon-parkfinder_1 { background-image: url(../images/sprites.png); background-position: -1080px 0px; width: 1080px; height: 1920px; } I have a large image sprite and i placed it in small div. i expect it to be responsive. but it did not…
    lch
    • 4,569
    • 13
    • 42
    • 75
    -1
    votes
    1 answer

    JS onclick issue to call images of css sprites

    I've created a JS that upon clicking an image performs a certain action. ATM all images are loaded individually and called with this function: var array_colors = []; $('#input_59_20 > li.active').each(function(index){ var img =…
    amir
    • 27
    • 9
    -1
    votes
    3 answers

    Create different (button) backgrounds using pattern sprite

    I would like to create a web page that has a lot of buttons. Those buttons will have a 'rusty' look on them. To avoid the issue that all the buttons would look exactly the same, I was thinking about creating a sprite png of a pattern and then have…
    Malachi
    • 977
    • 6
    • 16
    • 31
    -1
    votes
    1 answer

    What is best practice for fluid designs - using css sprites or inline images?

    I am working on a web site which is supposed to have a fluid layout. I am currently presented with a dilemma: shall I use css sprite or opt for inline images? All images will need to be fluid and reduce/enlarge their size on each respective screen…
    Vikita
    • 261
    • 6
    • 16
    -1
    votes
    1 answer

    CSS - Select area of an image and display

    I need help creating images for my navigation menu. I saw a site that has only one image that includes lots of small images and I guess the site recognises which to use and where and when. For example: show image How can I select the home button,…
    Henrik Varga
    • 55
    • 11
    -1
    votes
    1 answer

    css sprite background-position not working

    I am trying to move a piece of text on a specific part of image using css sprites.But the background position I am applying doesn't seem to work. I have tried changing the background position but the text part(i.e. twitter, google plus) doesn't move…
    user3575278
    • 21
    • 1
    • 4
    -1
    votes
    1 answer

    progid filter isn't running

    I'm using a filter to the older IE on my sprite, so I used the filters. The code below isn't working. I know I made a mistake I don't know wich one / where:-/ On Chrome it's ok, the properties is disabled but in IE, the background-size isn't…
    clement
    • 4,204
    • 10
    • 65
    • 133
    -1
    votes
    1 answer

    background-size doesn't work in IE

    I'm using this class and this id (for instance) to add a picture on one div : .icones { background: transparent url('../contents/homepage/60/icones.png') no-repeat; display: inline-block; width: 50px; height: 48px; …
    clement
    • 4,204
    • 10
    • 65
    • 133
    -1
    votes
    1 answer

    Sprite to cater for multi device sizes vs Media query for individual images

    We need to build a responsive mobile site that will cover sizes from 300 width to Tablet high def. We are considering using a sprite for all icons (12 icons in total) to reduce image size - combined with media queries (3 sprites to scale down for…
    Dancer
    • 17,035
    • 38
    • 129
    • 206
    -1
    votes
    1 answer

    Menu Sprite Navigation

    this is the mockup for the site I need to code Mockup my menu sprite is not working properly, here you can see it Website Here is the HTML HTML file and here the CSS CSS file
    Daniel Hernandez
    • 577
    • 2
    • 8
    • 18
    -1
    votes
    2 answers

    Single CSS sprite for 2 different classes. Is it a good way to do it?

    Im trying to reduce the number of HTTP calls by using sprite image in my project. So the structure goes like this:
    Content here
    Content here
    Ivin
    • 4,435
    • 8
    • 46
    • 65
    -1
    votes
    1 answer

    how to increase the photoshop sprite canvas width and height

    I am creating a sprite via photoshop and have run out of canvas width .However when i try to increase the canvas width all the positions of the icons in the css seem to go off . I am using the relative increase method . How do i only increase the…
    Neil
    • 2,802
    • 8
    • 34
    • 49
    1 2 3
    …
    57
    58