CODEWITHSUNDEEP
csshtml
user755806
user755806

Reputation: 6825

Setting the background image to html button?

I have below code to set the background image to button.

CSS:

input.hButton{
    background-image: url('images/hbutton.png');
    height: 21px;
    width: 110px;
    text-align: center;
    color: #696969;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    display:block;
}

HTML:

<input type="button" class="hButton" id="customize" value="Customize Table"></input>

Output:

enter image description here

Here when the button text is too long, button is split. How can I get it fixed?

Upvotes: 1

Views: 85

Answers (3)

Krish
Krish

Reputation: 1894

Hi please use the pure css code.. and remove your older method..

Fiddle:http:http://jsfiddle.net/nikhilvkd/RZ4vV/1/

What's Here?

1-Gradient

2-Border radius

3.border top,right and left

.hButton{

    border:solid 1px #0e4f85;
    border-bottom:none;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
    padding:3px;
    color:#696969;
    background: #f7f5f5; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7f5f5 0%, #e0dede 50%, #e0dede 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5f5), color-stop(50%,#e0dede), color-stop(99%,#e0dede)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f5f5', endColorstr='#e0dede',GradientType=0 ); /* IE6-9 */

    }

Upvotes: 1

TusharG
TusharG

Reputation: 505

replace your css code background-image property with this one :

background-image: url('images/hbutton.png') top repeat-y;

Upvotes: 1

Gromish
Gromish

Reputation: 199

Add background-size: 100% 100%;

or find your perfect setting here: http://www.css3.info/preview/background-size/

Btw in your case should be better:

 use a gradient
 use border-radius for the upper corners
 use a thin border

Upvotes: 2

Related Questions