CSS background-image ... Possible to scale image?

[Noozer]

Is it possible to specify a background-image for a CSS class and have that
image scale to fit whatever space is taken by the content of the object
using that class?

ie.

CSS:
.button {background-image: url(button.gif);}

HTML:
<p>...next, click the <span class="button">OK</span> button to accept the
change or click the <span class="button">Cancel</span> button to cancel the
changes.</p>


....and the "button.gif" image would be scaled to fit the height/width of the
"OK" text and the "Cancel" text on the page?

 

[Neal]

Is it possible to specify a background-image for a CSS class and have
that
image scale to fit whatever space is taken by the content of the object
using that class?

ie.

CSS:
.button {background-image: url(button.gif);}

HTML:
<p>...next, click the <span class="button">OK</span> button to accept
the
change or click the <span class="button">Cancel</span> button to cancel
the
changes.</p>


...and the "button.gif" image would be scaled to fit the height/width of
the
"OK" text and the "Cancel" text on the page?

In this case the image would scale terribly. Try this:

..button: {
background: url(button.gif) repeat-x;
}

and have the image be a regular-height but narrow image which will then
repeat left to right for the width of the element.

 

[David Dorward]

Is it possible to specify a background-image for a CSS class and have that
image scale to fit whatever space is taken by the content of the object
using that class?

No.

 

[Noozer]

CSS:

In this case the image would scale terribly. Try this:

.button: {
background: url(button.gif) repeat-x;
}

and have the image be a regular-height but narrow image which will then
repeat left to right for the width of the element.

Thanks, but the image doesn't "roll" properly.

The "button.gif" has "edges"on all four sides so the repeat-x wouldn't work.

Not a big deal, but would be nice to have.

Thx!

 

[Noozer]

No.

Didn't think so, but wanted to make sure I wasn't missing anything obvious.

Thx!

 

[Neal]

The "button.gif" has "edges"on all four sides so the repeat-x wouldn't
work.

Replace the edges with CSS borders. It's really the best you can do.