CSS resizable background image for a button

[Chris]

I have a button (background image) for both link and submit elements. The image has all 4 edges drawn. How can I make it resizable?

[Marek]

If you want it width-resizable, then you can split the background into two parts and use the Sliding Doors technique.

However this requires adding markup to your elements, because you're essentially layering two backgrounds. CSS3 allows multuple backgrounds per element, but that's still out of reach.

If you want the elements to be both width- and height-resizable, then it's going to involve more CSS wizardry and a lot more markup. For instance, to achieve rounded corners, there's about a dozen of different methods, and each one uses complex tangles of CSS and tons of extra HTML markup. And that's just for the corners: if you want to make an entire frame out of images, then it's even messier. Here, too, CSS3 will eventually save the day, with support for border images as well as built-in rounded corners.

[Chris]

I need only width resize, height is fixed.

Just plain ugly resize (stretch), no extravagances. I think it must be doable via one CSS tag, but do not know how such tag is called Something like "repeat-x" but not repeat the image but stretch it like "stretch-x"...

[Marek]

There is no such way to stretch the background image in CSS, unfortunately.

[Chris]

What!? That's terrible!

So, how can I do something like that (any technique):
- a box with stretched image
- a text on top of it
- the box width depends on the text size (autostretch)
- height is fixed

[jannesiera]

Do you mean something like this : http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html ?

[dsheroh]

There is no such way to stretch the background image in CSS, unfortunately.

CSS3 adds a background-size property, as shown at http://webdesign.about.com/od/css3/f/blfaqbgsize.htm  There are also some examples on that page of how to fake it in CSS2.

http://www.htmlite.com/faq022.php demonstrates an alternate approach.  ("The trick to stretching an image in the background is to not have the image in the background. Instead, it is placed on the webpage (like any other image) and everything else is layered on top of it using css.")

[Chris]

So, the simpliest solution would be cutting the image into two and using Sliding Doors technique?

Should I expect any problems with IE6?

[Hawkins]

I would have no Idea because I am a firefox user but just give it a try