Remove border around image - html

Question

guys. I style little form with submit button.
It looks like:
As you can see there is some white background around submit image and I don't have idea why! Image is cut fine and I always cut image with transparent background.
my HTML:
<form action="#">
<textarea rows="4" cols="50"> </textarea>
<input type="submit" class="join-us" value="PŘIDEJ SE K NÁM">
</form>
CSS:
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 114px;
line-height: 114px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowarp;
}
Live website can be find on http://funedit.com/andurit/new
Can you help me to remove that white backgroun from there?

Answer 1

It's not a white background, it's the input element's border. Just remove it using CSS by adding the following rule to the .join-us class:
border: none;
It seems that you also need to adjust the height of the button to 106px, so your final class definition will look like this:
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 106px;
line-height: 106px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowrap;
border: none;
}

Answer 2

Setting
border: none;
is an important part to remove the standard <button>-style. However, in your case it is not quite enough: You also have to set
height: 106px;
Since your image is only that high.

Answer 3

It's not a Background of input.
You can easily remove this white border, by setting the CSS property border:none;,
And the bottom white background is due to your Image. It's because your image have some transparent area at the bottom.
If you want to remove it, you can try to set height: 106px; into CSS class .join-us.
After doing this your Input look like this : -

Answer 4

As buttons have there default border style, you need to overwrite that:
border:none;
so ur css should be:
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 114px;
line-height: 114px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowarp;
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 114px;
line-height: 114px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowarp;
}

Answer 5

Just add the following CSS to your .join-us class
border:none;

Answer 6

.join-us {
height:106px;
border:none;
}

Answer 7

Add both of these styles to your .join-us class.
border: none;
background-size: 100% 108%;
The border style will remove the small while line around your image. The background-size style will stretch out the image to fit perfectly into your class background with no white space.

Answer 8

You need to remove border: 2px outset buttonface; from your stylesheet.

Answer 9

Your background image height and input height are not equals. So as you see under image you have a void space that shows background-color.
So yaou have to set background-color equals transparent or change input height.
Use this:
background-color: rgba(0, 0, 0, 0);
background-image: url("images/join_us.png");
background-repeat: no-repeat;
border: 0 none;
color: #F7F7F7;
cursor: pointer;
height: 114px;
line-height: 114px;
margin-left: 10px;
margin-top: 10px;
vertical-align: top;
width: 181px;