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


Tags: css,sprite,css-sprites

Problem :

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.

Sprite

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.

Example sliced

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?

enter image description here enter image description here

Questions:

  1. 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.
  2. If question 1 is No, then how do I create a sprite layout for this example?
  3. 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.



Solution :

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.

Answers:

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. :)


    CSS Howto..

    Show required asterisk star after the text?

    How can I turn the page's font color to green when a button is clicked

    How to dynamically change CSS using JS

    How can CSS have a significantly negative effect on page paint time in a specific area of a web page?

    How to add html code into html?

    How to align social media icons in one row?

    How to use CSS sprites within a responsive design

    how to create circle that cut off one piece with css

    CSS How to hide text after a span

    How to do mobile devices-friendly CSS for both desktop and mobile devices

    CSS - How to make a text to be shown under the center of an element, no matter how long the text is

    How to customize Twitter Bootstrap from Illustrator design

    How to show a region on a image with CSS

    How to set image height 90 % of whole page height (not viewport)

    Symfony2: How to link CSS to HTML part?

    How to read CSS specification?

    How to reverse jQuery css styling?

    How can I apply CSS to an HTML text input?

    How to add Css classes in TinyMCE editor Styles drop down through coding

    How to avoid an hover on a menu item to affect the menu items on the right

    Having 2 css code blocks in html files how to make only one work using JS?

    How can I setup Javascript dynamically to expand divs when clicking another div?

    How to prevent Ajax long-poll from reloading div in Chrome?

    How to retrieve the real height of a #div (including overflowed parts)

    How to style nested element that is styled by its parent already

    How to get a CSS selector using Selenium WebDriver?

    How to add a class to a bar using jQuery?

    How can I create HTML/CSS responsive tile?

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

    How to set z-index in css background