Question

I have multiple styles such as button_50 where the width is 50px, button_75 where the width is 75px, and so on…

Is there a way to dynamically generate the length of the button based upon the length of the text, so I probably would just have to create one style like button and I can apply that to any button and it would shrink or stretch based on the length of the text.

Here is my asp.button declaration:

<asp:Button ID="btnReset" runat="server" Text="Reset" OnClick="btnReset_Click"/>

Here is some styling in which I have a small image that I want to be able to expand and shrink depending on the length of the text.

.test_button
{
background: url(../images/test/grey-left.png) top right left bottom;
background-repeat:no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
height: 23px;

}

I added the top right left bottom to the class and that expands the image across. How can I apply 4 different images to each background position of the button so I can have a sort of gradient for example instead of the same button for top right left bottom.

Answer 1

Your changes have clarified what you want a lot from when I first replied.

Each element can have ONE background image only*. The solution is to having multiple background images is to have multiple HTML elements:

<span class="fake_button">
  <span>
    <span>
      <input type="submit">
    </span>
  </span>
 </span>

Then in your CSS add an image to different corner of each one.

It’s not simple or pretty but it’s the only way of having multiple background images.

*I think some of the nightly builds of Safari and Firefox can do this but I suspect this isn’t what is being asked about.