I am wondering if it is possible to use a sprite where each image is 16 x 16 as a background to an input text/textarea which is around 300px. Anyone know a way or should I just slice them into different backgrounds.
1
-
Is the background repeating? in what direction? can you post an image/example?Tomas Reimers– Tomas Reimers2011-06-21 19:37:38 +00:00Commented Jun 21, 2011 at 19:37
Add a comment
|
4 Answers
Your needs may be an excellent candidate for Diagonal CSS Sprites.
The idea is that you can use the sprite as a background image in a variable or larger-sized context without fear of other graphics in the sprite showing up.
Why a Diagonal Sprite?
With the sprite built on a diagonal there are no components below or to the right of the component you are showing. This allows for the element using the sprite to be as wide or as tall as it needs to be with no worry of exposing the next component.
Naturally, this is at the cost of a larger sprite file size because of the extra white space, however the flexibility is usually worth the file size tradeoff.
1 Comment
Jacques
Would this work if you wanted to align the image anywhere 'but' the top left?
You might try to do this that way:
2 Comments
Jacques
It seems many sprites look like the one you have inserted here, but the question is how to use it in an input control without other parts of the sprite showing up. Pseudo isn't an option for input controls.
pawlik
Very easily - let's say the input has to have the blue gradient background (the one at the very bottom). What you have to do is setting background to
url(sprite.png) repeat-x 0 -225px (225px is the height at which the blue gradient starts). That way you have the possibility to repeat gradient horizontally and other elements wont show up.Yes, it's certainly possible to use a sprite on an input, but I'd strongly suggest against it if you care about browser compatibility. Background images on input elements in Internet Explorer 7, for example, don't stay in a fixed position so as you type, the background image will move. If you're using a horizontal sprite, that could be especially problematic. I'd suggest putting the input in a container element that has the background. And to that end, make sure there's extra room surrounding each image for browser and device inconsistencies with form element spacing/heights/margins/padding. Using a reset CSS stylesheet would be helpful at the start. And test and test again!
Comments
Well, you could just put each sprite 300px apart in the sprite sheet, so only one can be seen in the box at a time.
Set:
background-repeat: no-repeat;
And for textbox2 do:
background-position: -300px 0;
Or something.
1 Comment
Jacques
This doesn't work. If you end up with a wide enough element it will end up showing you the next image.