CSS Sprites - Not Only for Background Images

CSS Sprites - not only for background images?

You can use a standard <img /> tag and put it in a container (like a <div />) with a limited height/width. Then use relative positioning or negative margins to control the position of the image.

why do sprites not work with a general background?

To answer your first question:

If the browser finds an image in a Style Sheet, it will download it and then store it in your browsers cache. The next time that same image is found/requested in a Style Sheet from the same URL (even during the same initial page load), it will be served from cache. NOT re-downloaded. So while you may have spritesheet.png 3 times in your Style Sheet, it is only downloaded once and not wasting bandwidth or page loading speed.

It is because of this caching feature that sprites are favoured in providing things like icons and other smaller images.

---

For your second question on why your first CSS example does not work, it could be any number of issues ranging from a simple typo, or all the elements you are wanting to use the sprite with not having the sprite class.

In order to properly help you with this problem, we need to see your HTML that goes along with the posted CSS. Please make an edit your question and add your HTML as a code snippet.

CSS Sprite Image Background Issue

You need to add width and height rules in the sprite class to match the size of the icon in the sprite that you need.

Also try adding the icon as a pseudo element - like so:

.sprite:before {
    content:'';
    display: inline-block;
    background:url("http://lorempixel.com/400/200/food") -50px -50px no-repeat transparent;
    margin-right:5px;
    color:red;
    width: 20px;
    /* icon width */
    height: 20px;
    /* icon height */
    vertical-align: middle;
}

FIDDLE

How to scale CSS sprites when used as background-image?

Your image sprite has a dimension of 500x400 so define half this size if you want to reduce by 2 on the background-size then adjust the background-position to get any icon you want:

.my-sprite {    background-image: url("https://i.stack.imgur.com/lJpW8.png");    height:50px;    width:50px;    background-position:150px 0px;    background-size:250px 200px;        border:1px solid;}

<div class="my-sprite"></div>

use CSS sprites for list (li) background image

You can also use

li:before {
    background:url(..) no-repeat -##px -##px;
    width:##px;
    height:##px;
    display:block;
    position:absolute;
    content: " ";
    top:##px;
    left:##px;
}

and thus get an additional element added to the DOM and give that the background image.

CSS sprite - showing part of another image when zooming

Different browsers may use different algorithms for rounding numbers and rendering images in certain cases. You could read some articles about it, for example — this and this.

So, when your zoom is 150% and you have 29x29px image, your browser is need to render 43.5x43.5px image. How each version of each browser will round it? We don't know, maybe 43x43px, maybe 44x44px. There is article about sprites and zoom.

I create new code snippet with two pairs of images. The first pair uses your image sprite and the second — my. I increased the Facebook image size from 29x29px to 30x30px. Try to zoom it. You can see they have problems on different zoom ratio (the first — on 150%, the second — on 110%—125%).

JSFiddle

.fb29 {    width: 29px;    height: 29px;    background: url(http://i.imgur.com/O2Cp0nb.png) no-repeat;    background-size: 29px;}
.sun29 {    margin-top: 10px;    width: 16px;    height: 16px;    background: url(http://i.imgur.com/O2Cp0nb.png) 0 -29px no-repeat;    background-size: 29px;}
.fb30 {    margin-top: 10px;    width: 30px;    height: 30px;    background: url(http://i.imgur.com/mRIPLXO.png) no-repeat;    background-size: 30px;}
.sun30 {    margin-top: 10px;    width: 16px;    height: 16px;    background: url(http://i.imgur.com/mRIPLXO.png) 0 -30px no-repeat;    background-size: 30px;}

<div class="fb29"></div><div class="sun29"></div>
<div class="fb30"></div><div class="sun30"></div>

Position CSS Sprite Background Image to the right of text

Try this.

.container {  width:1247px;  /*height:30px;*/    }
.container a {  display: block;  position: relative;  margin-bottom: 15px;}.container a:after {  background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;  height: 30px;  width: 30px;  display: inline-flex;  content: '';  position: absolute;  top: -5px;  background-position: -455px 0;}
.container .external {  background-position: -491px 2px;}.container .mail {  background-position: -526px 0px; }

<div class="container">  <a class="external" href="http://somelink.com/">MyLink</a>  <a class="mail" href="gmail.com">Mail To Us</a></div>

How do I use a sprite background image to display once on an element (no-repeat)?

There is an excellent tutorial on background image crop for sprites here:
css-background-image-hacks

The trick is to use the pseudo selectors :after or :before to place the icon into the header without having to add an additional element into the html structure.

And here I add a working demo using the tablesorter plugin:
http://jsfiddle.net/FXq8b/

.tablesorter thead tr {
  line-height:16px;
  background-color:#ddd;
  cursor: pointer;
}
.headerSortUp:after, .headerSortDown:after {
   content:"";
   float:right;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url('http://www.wooldalejunior.org.uk/ui/vendor/jquery.ui/css/smoothness/images/ui-icons_222222_256x240.png');
   background-position:0 -16px;
}
.headerSortDown:after {
   background-position:-64px -16px;
}

now you just need to move as many times x 16px to the left and up to reach the desired icons (for another example ... up -> background-position: 0 -48px; down -> background-position: -64px -48px ... or up -> background-position: -96px -192px; down -> background-position: -64px -192px, you just need to count how many icons from top and from the left edge your desired icon lies on the image: http://jsfiddle.net/FXq8b/1/).

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

For anyone caring about a solution that uses PNG sprites, this is exactly what you can do. To help render the sprites smoothly on mobile (as well as high DPI screen) devices we need a larger image (about x2 the sizes, e.g: the normal screen requires a spritesheet width of 500px, you need at least another one with width of 1000px).

All the background-position and background-size are the same on all devices (mobiles & desktop pcs), the only difference here is the background-image. On desktop pcs you can use the normal (small) spritesheet whereas on mobiles you can use the larger one (as mentioned above).

Here are the 2 snippets of CSS code applied for desktop pcs & mobiles:

This is the common CSS:

.item {
   background-position: 0px 0px;
   background-size: 500px 300px;
   background-repeat: no-repeat;
}

This is applied for desktop pcs:

.item {
   background-image: url(your_normal_sprites_500.png);
}

This is applied for mobiles:

.item {
   background-image: url(your_large_sprites_1000.png);
}

To switch the style/css programmatically for desktop/mobiles, we can take the benefit of window.devicePixelRatio. This is not supported on some old browsers, but it should be available on most popular modern browsers now.

var isHiResScreen = (window.devicePixelRatio || 1) > 1;
if(isHiResScreen){
   //pick style for mobile
}
else {
   //pick style for desktop pc
}

Of course you should consider using SVG spritesheet instead if possible as @Dejan.S has mentioned in his comments (and of course I've known about this thanks to him). It's very promising :)

my background url for css property is not displaying image sprite?

To answer a couple of your questions:
"Is this image considered an image sprite?" I would say yes. Multiple smaller images composed together in a single image. A sprite is useful for reducing network calls to pull a single image instead of multiple images smaller ones.

You generally won't use an <img> tag to display a sprite. Sprites will be used as background images. The usage within the <div ... is more accurate as you are applying a background-image with CSS.

The Width and Height of your background image should represent the width and height of the smaller image within the sprite. You also need a background position to tell the browser where to start rendering with width and height.

The background-position CSS element is slightly misleading. It does start at 0,0 which is the top left corner of the sprite. However, from there the values go negative instead of positive.

To render the first house in the sprite, you have the background-position and width and height correct in the #home element, but you need to move the background-position to the .img element. The <div class="img"... is the one proper way of utilizing a sprite.

It should look something like:

<style>
        .img {
            width: 46px;
            height: 44px;
            background-image: url("images/img_navsprites.gif");
            background-position: 0 0;
        }
</style>

<div class="img"></div>

I also mentioned earlier about the background-position goes negative instead of positive. This means, for example, if I wanted to render the Bottom Right Arrow for instance you would apply negative X axis to the position and a negative on the Y axis as well.

That would look something like:

<style>
        .img {
            width: 46px;
            height: 44px;
            background-image: url("images/img_navsprites.gif");
            background-position: -91px -45px;
        }
</style>

---

Related Topics