Remove border around image

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

只需将以下CSS添加到您的.join-us类中

border:none;

Answer 6

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;

Answer 7

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

Answer 8

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 9

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