CODEWITHSUNDEEP
htmlcss
user3009924
user3009924

Reputation: 59

Remove border around image

guys. I style little form with submit button. It looks like: enter image description here

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?

Upvotes: 0

Views: 400

Answers (9)

Ishan Jain
Ishan Jain

Reputation: 8171

It's not a Background of input.

You can easily remove this white border, by setting the CSS property border:none;,

enter image description here 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 : -

enter image description here

Upvotes: 1

Chalist
Chalist

Reputation: 3307

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;

Upvotes: 0

Shakesy
Shakesy

Reputation: 335

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

Upvotes: 0

Fizzix
Fizzix

Reputation: 24395

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.

Upvotes: 0

Animesh
Animesh

Reputation: 1033

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

Upvotes: 0

theHarsh
theHarsh

Reputation: 680

Just add the following CSS to your .join-us class

border:none;

Upvotes: 0

Kjeld Schmidt
Kjeld Schmidt

Reputation: 768

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.

Upvotes: 2

BenM
BenM

Reputation: 53246

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;
}

Upvotes: 2

Tuhin
Tuhin

Reputation: 3373

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;
    }

Upvotes: 0

Related Questions