Is it possible to use CSS sprites for "foreground" images - i.e. images that users are supposed to click on and interact with and maybe even print?
Instead of using the CSS background-image property, instead you'd use... what?
Thanks!
~S
+5
A:
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.
I outlined this technique in a blog post regarding using CSS sprites with <input type="image" />
Josh Stodola
2010-03-11 19:37:30
Genius, thank you!!
Summer
2010-03-11 19:42:11
This is overkill IMO, you can just set the input to display block and remove the div/wrapper out of the equation all-together, it's a much simpler approach.
Nick Craver
2010-03-11 19:42:25
@Nick That does not make any sense. How would you apply a sprite without using the container?
Josh Stodola
2010-03-11 19:45:47
@Josh - Just using the background-position property, I do this all the time and it's **much** simpler and still valid CSS in every browser. For example on a button: `.myImg { background: url(../Images/Sprite.png) no-repeat; height: 20px; width: 40px; background-position: -40px 0; display: block; } .myImg:hover { background-position: -40px -20px; }` That's a image and a hover with much less code and markup, just need a `<input type="button" class="myImg" />` and you're done.
Nick Craver
2010-03-11 19:49:49
@Nick - but then it's really a background image, isn't it?
Summer
2010-03-11 19:49:53
Better yet, use the div wrapper but remove the img out of the equation all-together. Use CSS background-image property instead! What is important is that the div is in the "foreground", meaning the topmost element. Not the technique used.
slebetman
2010-03-11 19:52:22
@Summer: Yes it's a background image but a "foreground" div. Just imagine that the div as a virtual img in your mind. The problem is only in your mind, not on the page.
slebetman
2010-03-11 19:53:36
@Summer - I added an answer to explain this a bit better, formatting in comments is....lacking.
Nick Craver
2010-03-11 19:59:08
@slebetman I don't want images to be in the background, in part because it's a page that people are likely to print, and most browsers don't print background images by default.
Summer
2010-03-11 20:27:18
@slebetman Yeah just remove everything and make your whole site out of DIVs with background images! Do semantics mean anything to you?! How about the default behavior of submitting the form when an input type="image" is clicked? How about alternate text for the blind?
Josh Stodola
2010-03-11 20:38:18
@Josh - Who said you can't have title="" on any element? screen readers find this as well. @Summer - That's not true in most cases, just try print preview on youtube, it's mostly one big image map using background just like we're talking about: http://s.ytimg.com/yt/img/master-vfl149944.png
Nick Craver
2010-03-11 20:40:59
@Nick So what? The bottom line: the reader has NO WAY to tell that the purpose of the element is to display an image! What about Images off scenario? What about default behavior/styling of input elements? There is no point of throwing all that away just to say that you used a background image. Now please quit beating this dead horse, the asker has the solution they are looking for. There are legitimate reasons to avoid background images, and I've provided a solution to work around it because I have had to do it for clients in the past. We can move on now.
Josh Stodola
2010-03-11 20:46:50
@Josh - You can do as you please of course, just letting you know there's a less css, less markup, fully screen-reader and printer compatible way of doing this. Refusing to believe there is more than 1 way to do something (and correctly at that) is not a great attitude to have in the programming world.
Nick Craver
2010-03-11 21:05:57
Cool, this works when creating html map circles and polygons (and don't want to approximate with positioned squares using more common css only techniques)
tovare
2010-07-27 22:58:24
A:
You can do this, but you have to use background images for sprites as you have to be able to set position. This can be used for links or whatever you want. Look at Googles sprite, they use it for there buttons on iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
Dustin Laine
2010-03-11 19:39:12
-1 You can control the position of any element using `position` in CSS in combination with `top, left, right, bottom`. Alternatively, you can use negative margins.
Josh Stodola
2010-03-11 19:40:22
I never said you could;t control position in any element. However, you can make it work with background images on any element.
Dustin Laine
2010-03-11 19:44:37
Well of course you can, but they are specifically asking how to do it *without* background images!
Josh Stodola
2010-03-11 19:48:10
+1
A:
You can do this with less CSS like this:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Whatever has the class class="myClass" will have just the image in it, nothing else. This can be a <a> an <input> or a normal <div>, whatever you want.
It's a background image...but it's the element you're looking at, nothing's in front of that background. Just because you're using background-image for the property doesn't mean it's not a foreground element...like a button you can click on. You can do that like this:
<input type="button" class="myClass" />
Nick Craver
2010-03-11 19:58:25