Html/css button

Question

.classname {
background-image:url(../../images/classname.png);
background-color:transparent;
background-repeat:no-repeat;
text-align:center;
border:none;
height:50px;
width:160px;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
color:#CCC;
}

<div class="classname">Text</div> 

Why the Text is above of image? What should I add to make it normal? I can use padding-top, but then the bottom of image will have space too if you know what I mean. Thanks.

Answer 1

Because the image is a background for the text.

If you're trying to make an image button with text fallback, do <img src="someurl" alt="sometext" />

What do you mean by above?

Answer 2

I created this for you, I think that's how you want to make it.