Witam, mam taki html:

[HTML] pobierz, plaintext 
<div id="category">
obrazek tła button-a <img src="images/category.png" alt="img">
 <form action="" id="selectC" method="post" >
   <menu label="category">
              <button type="button"  onclick=""></button>
              <button type="button"  onclick=""></button>
              <button type="button" class="category_button" onclick=""></button>
              <button type="button" class="category_button" onclick=""></button>
  </menu>
 </form>
</div>
[HTML] pobierz, plaintext 

css:

div#category button {
height:40px;
width: 140px;
float:left;
margin:0px;
padding:0px;
}
.category_button{
display:block;
height:40px;
width:140px;
float:left;
margin:0px;
padding:0px;
background-image: url("images/category.png");
}

Wygląda to tak: u góry obrazek tła, czyli jak powinien wyglądać button, niżej dwa buttony bez tła, button wciśnięty i reszta buttony z tłem.


Chcę żeby te buttony z tłem były obrazkiem więc ustawiłem obrazek w tle. Problem w tym że wokoło tego tła jest jakby szary margines. Jak go usunąć tak żeby był widoczny tylko obrazek tła?

[CSS] pobierz, plaintext 
border: none;
[CSS] pobierz, plaintext 

Faktycznie, dzieki.