How to create an image sprite that stretches both horizontal and vertically as a single image?
I'm trying to make a image sprite for a box that can stretch vertically and horizontally while also having a hover over state. I usually create a sprite that either stretches vertically or horizontally only. In that case I would make the parts of the box that must stretch infinitely touch either top and bottom of the image to loop vertically or touch the left and right side to stretch horizontally but I'm stuck on making a single sprite for both.
Here is what I am working with that will contain a list (<ul>) of link links that will use the background color from the hover state.
Left side: Regular state. Right side: Hover state
I don't know if I can just use CSS with what I have right now to do what I'm trying to accomplish or if I have to break up the image into little parts for a single file. Here is how I'm imaginging doing it for one side.
Here is what I ended up with in two different files. Still not completely happy because I would like this sprite to be self contained but maybe I'm just being too picky?
- Can I achieve my goal with the first image by using CSS code that is supported by most standard browsers meaning not requiring the absolute newest version of Firefox, Chrome, Safari? I want this to be highly compatible.
- If question 1 is No, then how do I create a sprite layout for this example?
- Can you provide example CSS (pseudo code is fine also) if implementation is not obvious for rounded corners?
Note: I know there are now list items in the box right now but imagine a menu and when you hover over the first or last item then the corners along with the header/footer is supposed to turn white to hover over state also. I can probably figure this part out on my own but I just wanted to mention it so that the sprite design isn't lacking this feature.
After more research, I found an answer. Unfortunately there was no real answer to my question and I didn't intend for this to be a trick question. Nonetheless, here we go.
1) No. It's just not possible.
2) The comment box is supposed to stretch indefinitely from width and height which makes using 1 sprite impossible. If this is truly the need then I have to do what the link Jared Farrish said to do with 2 background images.
Instead, the best solution I found was a combination of the first image and the sprite with the corners in it. Imagine a sprite as follows:
From left to right, but the side bars in the order of right bar, left bar, right hover bar, left hover bar, that touch the top of the grpahic to the bottom.
Secondly grab both pointers and put them to the right of the bars where the top of the comments boxes will be placed. This just makes it easier to program them in later with CSS.
Lastly, grab the the two comment boxes in my first graphic and put the hover state below the normal state. I came to realize that even though I said I wanted the box to stretch indefinitely, but this is not exactly true. There will never be a case where the box is 300,000px wide so I just stretched them to 900px because that is the width of my content and that gave the max width of these boxes 900px with an unlimited height.
The whole image came out to about 4kb and I was able to achieve having 1 image contain the sprite. I didn't need to put the corners separately on another part of the sprite because I an just reference where they are in the comment bubble. :)