And here I am with another problem. Basically I added the same thing for some other images, but they don’t resize to the size that I need. They are originally 40px per 40px. I have the spirit image file with all of them, and when I call them I have in place these CSS rules:
width: 25px; heigt: 25px;
But they just don’t resize. Some suggestion here?
Try height, Norman - it may just be the typo! 
You can’t change the size of the sprite images themselves if that’s what you mean? The images will always be at the size they are in the sprite. If you want to scale an image to fit the background then you need single images (not sprites) and then you can use background-size:cover to make them cover the whole background of the element.
Not sure if this is what you meant though:)
Happy new year guys! At least for me it’s the 1th! 
Anyway, @Gandalf, nope, I did the typo error here in the post but I have it correct in the CSS style on my website. But thank you!
@PaulOB Yup, that’s what I meant. So - poor me - I’ll have to recreate the spirite, but first I’ll need to scale all the images to be 25x25px. Argh, ok! Let me see if I can do it. I’ll let you know if I’ll have some problems! Thank you again for all!
This is what I have now:
http://www.klayz.com/community/index.php?styleid=30#apriNuovaDiscussione
I’m posting this because I found that maybe I could use the background-size property, even if it’s not supported on IE 8 or less. I can use it. If someone is running IE 8 and if they will see it like it’s right now, well, no problem. Anyway, I can’t make it work even trying to use that property to be true! Let me know if I should really consider to resize all the images and create a new sprite image.
Hi there Norman,
try this resized 200x200 image…
coothead
Thank you so much, coothead, but this way I’ll need to reset/recalibrate every position. Am I wrong?
Hi there Norman,
yes, you will need the change all the background-position values. 
For example this…
background-position:-40px -120px;…will become…
background-position:-25px -75px;
/* old values dived by 40 then multiplied by 25 */coothead
Thank you so much, coothead! I solved using this one more time:
It did all the calculations for me and this way I saved some time. Now everything works like a charm and I saved something like 100 requests on the page load. I’m loving these CSS sprites.
Obviously I had first to resize all the images to 25x25px, but using a batch action on the image editing program was pretty easy to do. Thank you all for the help given here, I really appreciated it.
or do as coothead showed you and resize them all to that size after creating the sprite - where only the one image then needs to be resized.
I have another question for you guys. Now instead of the <img tag I have a <span. I had the alt attribute for all the images, but now I had to remove it. Should I use title="" instead?
There is no connection between the alt attribute and the title attribute.
If you swap from an <img> tag with a title attribute to a <span> then you should retain the title attribute.
The alt attribute would become the text inside the span and so would not need to be repeated elsewhere.
Thank you so much felgall. Informative as always! Thanks!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.