css 重复-x 右侧

Question

is it possible to repeat only right side of picture. If I have a menu button picture, there are border or stripe on left side and I only want to repeat right side(without border).

When I'm just putting repeat-x scroll right or just repeat-x , the whole picture will repeat, but I only want right side to repeat, not left or whole picture.

I hope you understand what I mean.

This is button example. When my button title is too long and it will need to repeat button picture. Can I only repeat that yellow part of picture? not together with red. PS, Cant repeat color. because button is made with cradient.

Answer 1

Short answer, no, it's not possible.

A picture has fixed-width and you can't stretch just a part of it.

Solution: use two pictures, one for the left side, with fixed size and other to the right side which you can use repeat-x to fill the remaining space.

EDIT:

If your button have a horizontal gradient, the best you can do is to make a picture wide enough to encompass "almost" all cases. The key word here is almost because you can always find someone with a screen wider than the image itself.

Answer 2

Not sure why you can't use a solid color, but why not simply use a wider image?

Answer 3

just put "no-repeat top right" is that what your meaning

Answer 4

Smashing Magazine has an excellent tutorial on designing buttons with CSS:

http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/

Scroll down to the section "Sliding Doors: Flexible Buttons" , it explains exactly what you're looking for.