Question

I want to use button that background image is mine and text is on center of image which is button’s background. I used this:

  <li>  
    <a href="@Url.Action( "Start", "Home" )">
       <img alt = "" src="@Url.Content( "~/Content/images/buttonimage.png" )" height=23px; width=70px; />Start
    </a>
</li>

But, “Start” text is not on image, it seems after image. How should I do this?

Answer 1

You should use the following code to achieve what you want.

HTML:

<li>  
    <a href="@Url.Action( "Start", "Home" )" class="btnImg">
        Start
    </a>
</li>

CSS:

.btnImg{
     background: url(/url/of/image.png);
     width: 70px;
     height: 23px;
     text-align:center;  
}