Understanding how to use image sprites

I don’t read Paul’s reply to say that you need two sprites.

It was simply said that you need to re-state the same sprite url after your gradient rules so it’s not removed on .active

If you scroll the code box all the way to the right you will see that he added the img url back. Your code on the fiddle is missing that url

2 Likes

It’s the same image. There is only one image url that gets loaded and you can reference it hundreds of times. It won’t get loaded again (unless you switch off caching).

I think you missed the point I was making in that when you declare background-image for the second time then all previous versions of that property are reset even if they had multiple images defined. Linear-gradients are essentially treated as background images in most respects.

If you say background-image: img1, img2, img3 (pseudo code) and define three images to start with then you can’t set up another rule for the same element and say background-image: img4 without losing img1,2 and 3. You would need to define them again. The fact that you specify them again does not matter because the image was loaded into cache the first time it was seen and is still there so there are no overheads to consider.

I gave you the answer anyway so just run my code and see that it works.:slight_smile:

4 Likes

Isn’t this 2 image sprites?

1.)
transparent 260px), url("https://i.imgur.com/gY2nkOT.png");

2.)
transparent 260px), url("https://i.imgur.com/gY2nkOT.png");

 .playButtonb {
   position: relative;
   width: 260px;
   height: 260px;
   cursor: pointer;
   background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/gY2nkOT.png");
   border: 3px solid #0059dd;
   background-position: 0 -260px;
   width: 260px;
   height: 260px;
 }
 
 .playButtonb.active {
   border: 3px solid #e77d19;
   background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/gY2nkOT.png");
   background-position: 0 0;
   width: 260px;
   height: 260px;
 }

Unless I’m not seeing it, those two URLs look identical. What’s different about them?

1 Like

I don’t understand? What’s that supposed to mean?

There’s nothing different, and so, what would that mean?

I have a question, I was using these generators, one was showing me -0, and the other was showing me plain 0.

Is there a difference?

Is there even such a thing as negative 0?

And which 0 should I be using?

background-position: -0px -0px;
background-position: -0px -260px;

http://css.spritegen.com/

background-position: 0 -260px;
background-position: 0 0;

It means its one image not two :wink:

It’s the same image no matter how many times you say it!

When you use comma separated images in the background-image property you must restate all the images even if you are changing only one of them subsequently. You are changing the linear gradient so you need to restate and image paths also. If you weren’t changing the gradient then you could just change the background-position without the need to reference the url.

2 Likes

0 means 0; it’s a unitless value. There should be no - sign on it.

3 Likes

So, ff I posted the same image at the top of the page, and the same image at the bottom, the same url doesn’t get loaded twice?

The image is only fetched once. On first load the image is loaded into cache and the cached version is used until it expires some time in the future. You can add the url 100 times into your page but the http request will only be once.

3 Likes

I have another question, this other code was with the generator,

Am I supposed to add, or should I add any of the below code to my code?

display: inline-block;
no-repeat; 
overflow: hidden; 
text-indent: -9999px; 
text-align: left;

.img-260x260, .img-652652652656
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.img-260x260 { background-position: -0px -0px; width: 260px; height: 260px; }
.img-652652652656 { background-position: -0px -260px; width: 260px; height: 260px; }

This shows nothing:

This shows:

display: inline-block;

This shows:
background-repeat: no-repeat;
https://css-tricks.com/css-sprites/

Do you think I should add any of them to these codes?
https://jsfiddle.net/mntrmfsb/456/

 .playButtonb {
   position: relative;
   width: 260px;
   height: 260px;
   cursor: pointer;
   background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/gY2nkOT.png");
   border: 3px solid #0059dd;
   background-position: 0 -260px;
   width: 260px;
   height: 260px;
 }
 
 .playButtonb.active {
   border: 3px solid #e77d19;
   background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/gY2nkOT.png");
   background-position: 0 0;
   width: 260px;
   height: 260px;
 }

That code looks like its part of some image replacement technique where alternative text is available for assistive technologies like screenreaders. Your gradient backgrounds are just decoration and there is no need to clarify their purpose.

The only images of importance in your example will be the play and stop buttons so they are the elements that need some sort of description so that screen readers can tell what their use is. At the moment a screen reader wont have a clue what to do with your inline svg (as far as I know). That’s why I prefer to use a real image tag and use the alt attribute to supply the necessary information when an image is content and not decoration.

CSS tricks has an article about accessible svgs do you should read it as I am not into svg (except when referenced via the img tag). It looks like your inline svg needs a title and a description but read the article for full details.

1 Like

Is display: inline-block;

Needed for example?

This doesn’t show it:

Is it needed for what?

The ‘display’ property sets the display of the element (as you well know by now) and doesn’t have a bearing on sprites as such.

However if you are trying to apply width and height to an inline element such as a span so that you can apply an image (or image sprite) to it then you would need to change the display as inline elements cannot have dimensions applied (a span is an inline element).

Therefore you would need for example to make the span display:block (if on a line on its own) or display:inline-block (if you want a number on the same line) and that allows the dimensions to be applied (there are other display:values that could be used depending on circumstance).

This is basic css and nothing to do with sprites as such and something we have mentioned numerous times before. (That’s it from me today :slight_smile: )

1 Like

How come this one requires:
overflow: hidden;

And this one doesn’t?

It’s because they are using completely different techniques to manipulate the visible part of the image.

The first example uses an inner element of 520px height to hold the sprite so the overflow:hidden on the parent is used to stop all the sprite being visible. The parent is only 260px tall and if the overflow wasn’t hidden the inner span would stick out of the bottom of the parent revealing both portions of the sprite.

It’s a completely different method than the background position manipulation of the second example.

2 Likes

Paul just explained that, but I had also explained it in post #7

I had made a comment in the ruleset explaining what it was for

.sprite {
    width:260px;
    height:260px;
    overflow:hidden;/*hide half of the 520px tall span*/
    position:relative;
}

And I had also mentioned that it was a different method.

2 Likes

Is this what you mean by a 1px gap between each image?

You mean, title serves a purpose in svg’s?
<title>PLAY</title>

Is that all that is needed, is a title that gets added to each svg?


<svg style= "background-color:#cfc;" width="100" height="100" viewBox="0 -3 100 106"><path fill="currentColor" style="fill:black;stroke: orange; stroke-width:3px;" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg>

    <svg class="pausee hidee" style="margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title>PAUSE</title></path>
    </svg>
    
    <svg class="playe" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path>
    </svg>