How to create a sprite image that stretches both horizontally and vertically as a single image?

Question

I am trying to create an image sprite for a box that can stretch vertically and horizontally, and also have a hover over the state. Usually I create a sprite that stretches only vertically or horizontally. In this case, I would make parts of the box that should stretch endlessly, touching the top or bottom of the image to loop vertically or touch the left and right sides to stretch horizontally, but I'm stuck in creating one sprite for both.

Here is what I'm working with will contain a list (<ul>) of link links that will use the background color from the freeze state.

Left side: Regular condition. Right Side: Hover Status

I don’t know if I can just use CSS with what I have now to accomplish what I'm trying to accomplish, or if I need to break the image into small parts for one file. This is how I do it on the one hand.

Here is what I got in two different files. Still not quite happy, because I would like this sprite to be self-sufficient, but maybe I'm just too picky?

Questions:

• Can I achieve my goal with the first image using CSS code, which is supported by most standard browsers, which means the absence of the absolute latest version of Firefox, Chrome, Safari? I want this to be very compatible.
• If question 1 is No, then how do I create a sprite layout for this example?
• Can you provide an example of CSS (pseudo code is also good) if the implementation is not obvious for rounded corners?

Note. I know that now there are list items in the field right now, but imagine a menu, and when you hover over the first or last item, the corners along with the header / footer should turn white to hang over the state, I probably , I can personally consider this part myself, but I just wanted to mention it so that the sprite design lacked this feature.

Answer 1

After further research, I found the answer. Unfortunately, there was no real answer to my question, and I was not going to ask this question. However, here we go.

Answers:

1) None. It is simply not possible.

2) The end of the comment should stretch unlimitedly in width and height, which makes it impossible to use 1 sprite. If it is really necessary, I have to do what Jared Farrish said in order to make 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 are in the order on the right, the left bar, the right hover panel, the left hover panel, which touch the top of the grpahic to the bottom.

Secondly, take both pointers and place them to the right of the bars where the top comment fields will be placed. It just simplifies their programming later with CSS.

Finally, take the two comment fields in my first graph and set the hover state below the normal state. I realized that, although I said that I want the box to stretch out indefinitely, but this is not entirely true. There will never be a case where a box has a width of 300,000 pixels, so I just stretched them to 900 pixels, because this is the width of my content, and this gave the maximum width of these boxes 900px with unlimited height.

The whole image came out to about 4kb, and I was able to ensure that 1 image contains a sprite. I didn’t have to place the corners separately in another part of the sprite, because I just link where they are in the comment bubble. :)

Answer 2

This is the answer to your question number 1:

Not really, but very well achieved in CSS. Checkout fiddle

Refer to these pages for compatibility:

• http://caniuse.com/border-radius
• http://caniuse.com/css-boxshadow
• http://caniuse.com/css-gencontent

In general, it works in most browsers, except:

• In IE8 and below, there is no shadow or rounded border.
• In IE7 and below, there is also no arrow and freeze state, so just a field .:(

If you do not need to support IE7, I think it can be used.

CSS code:

.box { background-color: #ccc; display: inline-block; padding: 10px 20px; border-radius: 5px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); position: relative; } .box:hover { background: white; } .box:hover:after { border-bottom: 20px solid white; } .box:before { content: ' '; display: block; position: absolute; top: -6px; right: 26px; width: 8px; height: 6px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); } .box:after { content: ' '; display: block; position: absolute; top: -10px; right: 10px; border-bottom: 20px solid #ccc; border-left: 20px solid transparent; border-right: 20px solid transparent; }