IMG {center} Resize-auto with CSS

Hi, how i can resize only with on this image.

I have long text, but the text is out of image. I need to make this image with auto width depending the(text size).



There is my css; thnks

.panel_button {
	float:right;
	right:-60px;
	top:50%;
	color:#333;
	border:0px solid red;
	writing-mode:tb-rl;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	white-space:nowrap;
	position: fixed;
	width: 173px;
	height: 54px;
	font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
	font-size:24px;
	font-weight:normal;
	background:url(images/panel_button.png);
    background-color: #e3e3e3;
	margin-left: auto;
	margin-right: auto;

}

Code (markup):

 

You should slice button in 3(2) parts.
Than make 3(2) divs.
Check this picture, which will help you with imagination.

http://img19.imageshack.us/img19/418/56379670.jpg

 

How i can cut image with css
example for div1(left) i want cut only left position from button

 

If your buttons are going to be a solid color, you might as well use the border-radius style rather than rely on an image since you're using non-standard CSS anyhow. Simply style the anchors directly. Simple, effective and should gracefully degrade into a square rather than have round corners on browsers that don't support it. Maybe something like this:

<style type="text/css">
a.button {
     background: #000;
     padding: 10px 15px;
     -webkit-border-bottom-right-radius: 6px;
     -webkit-border-bottom-left-radius: 6px;
     -moz-border-radius-bottomright: 6px;
     -moz-border-radius-bottomleft: 6px;
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
     }
</style>

<a href="#" class="button">My button</a>

Code (markup):

You'll need to refine that a little bit to change the text's color, remove the underline and everything, but that should get you started.