Using image sprites would be an alternative to having to use preload image at all.
In this case, Yes, a sprite would be better than pre-loading since it is a BG image.
My rant on pre-loading images in the other thread was directed at loading html content images that the user may not be interested in. Not background images.
This is a good example of why we need to know what the context is and once again that there is not a one size fits all method of doing things.
Not exactly when you are talking about switching one image for another such as in a hover effect then you can use sprites to do this to avoid the delay on loading the new image.
‘Generally’ background images are only loaded when they are called for on the page ( otherwise every image in a css file would be loaded whether used or not and could be hundreds of images) which is why there is a delay the first time the rollover image is called. Sprites avoid this by having both states loaded in the one image and thus no delay on hover.
3 Likes
When setting up image sprites, which way is preferred,
Vertical, or Horizontal?
Is one way more the right way than the other?
It doesn’t matter if the images in the sprite are the same size and it makes no difference either way.
If you had various sized images in your sprite then generally you would fit them as best you can without wasting space.
Remember though that you need the image to match the correct size of the element you are applying them to and that you can’t repeat the image (e.g. background-repeat).
Also I allow a 1px gap between each image because IE has a rounding bug when the layout is zoomed you get a 1px discrepancy which can reveal part of the next image in the sprite.
2 Likes
Besides the IE rounding bug, don’t sprites have problems with browser zoom?
Apart from browser bugs there should be no problem with zoom as long as backgrounds have been sized to match the image in the sprite.
3 Likes
I think I understand what you mean.
Since this is going inside a vertical element, then I would use a vertical sprite here, and not horizontal.
Would I be correct here?
When doing vertical, the 1st image you see, should that be the top image, or the bottom image?
As I’m looking at it now, I’m thinking the bottom image.
Like this: 1.)
Like this: 2.)
The answer to both your questions is that it doesn’t matter. You can choose which image you want to show at any time no matter where it is placed in the sprite.
The order has no real significance other than expecting a logical system to work with.
1 Like
How would I implement image sprites on this code the correct way
How would the code be set up?
Using this sprite image?
I can’t help thinking that reading the article linked to at post #2 would help you at this point.
3 Likes
I tried it one way, and I couldn’t get it working like it’s supposed to. So, I must be doing it, implementing it entirely the wrong, incorrect way.
OK. Show us what you’ve got so far then.
Image Sprites
This is not the same as the below code and should be.
.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: -0px -260px;
width: 260px;
height: 260px;
}
.playButtonb.active {
border: 3px solid #e77d19;
background-position: -0px -0px;
width: 260px;
height: 260px;
}
It’s not the same as this:
It should look and act like this:
.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://via.placeholder.com/260x260");
border: 3px solid #0059dd;
}
.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/E0dNaoX.png");
}
You were close, try swapping you BG positions around.
If I understand right, you want the top blue portion of the sprite showing as the default state
.playButtonb {
background-position: 0 0;
}
.playButtonb.active {
background-position: 0 -260px;
}
Be aware that the class name .active can easily be confused with pseudo :active
Try to select class names that don’t conflict with established html/css elements and properties
1 Like
Can you tell me what I’m do wrong in how I’m applying image sprites to this code, and what would work in this situation?
The situation where I’m trying to apply the linear gradient over the blue image.
Adding this
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);
}
to
.playButtonb.active {
border: 3px solid #e77d19;
background-position: 0 0;
width: 260px;
height: 260px;
}
As far as I can tell, it doesn’t work, unless I’m doing something wrong.
Both images appear in this code:
If you want the blue image to show up on .active then you need to include the image in that state as you over-ride the background-image with a single gradient.
e.g.
.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;
}
When you use background-image you over-ride any previous background images or gradients so when you have multiple images specified you need to include them again.
1 Like
Isn’t the whole point of using image sprites that you only use 1 image url, not 2?
What would be the difference between using 2 individual image urls, and 2 sprite image urls?
2 of these
VS…
using these individually.
Is there anyway I can implement it differently where I’m only using 1 sprites image url, not 2?