CSS Image Sprites

How to make an image link using CSS sprites

You can use the standard <a> element to create links. Then with the css you can set the background image/position to each of them. Something similar (You have to learn how to do it):

<style>
  .SocialNav > a {
    background-image: ...;
  }

  .Facebook {
    background-position: ...;
  }

  .Twitter {
    background-position: ...;
  }
</style>

<nav class="SocialNav">
  <a href="https://" class="Facebook" aria-label="Facebook"></a>
  <a href="https://" class="Twitter" aria-label="Twitter"></a>
</nav>

You have to elaborate my example with these resources:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

CSS image sprites

Following your code and using sample images to illustrate, the following proves you will do only one HTTP request per image, no matter if it's repeated.

Consider the following:

<!DOCTYPE html>
  <html>
  <head>
  <style>
 #home {
width: 46px;
height: 44px;
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) 0 0;//first http request
}

#next {
width: 43px;
height: 44px;
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) -91px 0; //second http request
}
</style>
</head>
<body>

<img id="home" src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG"> 
<img id="next" src="http://www.online-image-editor.com//styles/2014/images/example_image.png">

</body>
</html>

This only returns 3 requests: 1 per image in the body and 1 for the CSS background image, used twice.

Network tab on Chrome

There is however the issue of misuse of markup and CSS in your code.
You should not set an image-background property to an img tag, which is an image by itself.

Choose a method and stick to it: either use images in your body (which will result in multiple images and therefore multiple requests) or use neutral elements like a div with specified background-image properties, using background-position to offset the sprite image.

CSS: using image sprites with css pseudo classes :before and :after

Don't use content to insert your image, as you cannot modify its position. Instead, set the content to " " and add the sprite as a background image. You can then use the background-position property to move the sprite to the correct position. Otherwise your example should be working just fine.

A working demo:

http://jsfiddle.net/RvRxY/1/

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>

Using CSS Sprites: Does replicating one large image many times burden the client?

Regarding the memory use, please see this post and this post

So the challenge is to chop up that long image into 114 small images
on the client.

What is the need to chop the long image. I would keep it as a single image and use as CSS sprite and show all images.

If your images has fixed dimension a JavaScript loop could render all images in the page. Or you could use a tool like this to get animal position and have it in a css file. But I would prefer the JS loop method.

The code would be something like this

var imageItem = "";
var x = 0;
for (var i = 0; i < 144, i++) {

  imageItem += "<li style='background-position: "+ x + " 0'></li>";
  x = x + 100; // this is the width of the each image
}

someElement.innerHtml = "<ul class='img-container'>" + imageItem + "</ul>";

In CSS

.img-container li {
  width: 100px;
  height: 70px;
  background-image : url('../your-long-image.jpg');
  background-repeat: no-repeat;
}

See this example, I am using only a single image, I am changing the offset position to show different locations from the same image.

var imageItem = "";var x = 0;for (var i = 0; i < 3; i++) {            imageItem += "<li style='background-position: "+ x + "px  0'>ss</li>";      x = x - 125; // this is the width of the each image}
    document.getElementById("container").innerHTML = "<ul class='img-container'>" + imageItem + "</ul>";

.img-container li {      width: 125px;      height: 200px;      border: 1px solid green;      background-image : url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/c9702304-c06d-4500-90b7-b6b6168093f8/db9n9km-ee485eb1-1ecc-4cd8-b845-f16900bde9e0.png');      background-repeat: no-repeat;      float:left;      list-style: none;    }

<div id="container"></div>

CSS image sprites

Like you said, one of the main advantage is to reduce the number of requests to the server, improving the response time (especially if you're loading a large amount of small images). But this is not the only reasons people use sprites.

If you don't use sprites for a "mouse over" display, the user will see the image disappear for a second... and it looks really bad. This is because if you change the image instead of just moving the sprite around it will load a new image and the loading time can be visible to the end user.

.bad{
  background:url(abc.jpg);
}
.bad:hover{
  background:url(abcHover.jpg);
}

.good{
  background:url(abc.jpg) 0px 0px;
}
.good:hover{
  background-position:15px 0px;
}

Another advantage of sprites is that you can keep all your images in one location and in some cases it makes more sense (for menus and so on).

To determine which area of a sprite to show, just use photoshop or any other image editing software.

Setting up image sprites using 1 url in the CSS

David M's solution is correct. The only issue that I can see with it is a missing comma after .wrapd .img (see below)

.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img,
.wrape,
.wraph,
.wrapf {
    background-image: url("https://i.imgur.com/Y0CrMX2.png");
    background-repeat: no-repeat;
}

CSS Image Sprites

How to make an image link using CSS sprites

CSS image sprites

CSS: using image sprites with css pseudo classes :before and :after

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

Using CSS Sprites: Does replicating one large image many times burden the client?

CSS image sprites

Setting up image sprites using 1 url in the CSS

Related Topics

Leave a reply