Css showing images twice opposing one?

Question

I have this css code that shows photos twice, its wierd, it's better, can I write this, are the links used to vote using jquery? :)) Css code:

a.vote_up, a.vote_down {
        display:inline-block;
    background-repeat:none;
    background-position:center;
        height:30px;
    width:30px;
    margin-left:4px;
    text-indent:-900%;
}

a.vote_up {
    background:url("images/uparrow.png");
}

a.vote_down {
    background:url("images/downarrow.png");
}

HTML:

<span class='vote_buttons' id='vote_buttons<?php echo $row['id']; ?>'>
        <a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>'>Vote Up!</a>

        <a href='javascript:;' class='vote_down' id='<?php echo $row['id']; ?>'>Vote Down!</a>
    </span>

Answer 1

Try adding background-repeat: no-repeat;to your a.vote_up and a.vote_down. By default, backgrounds will be repeated.

Answer 2

Using background, you overwrite the repeat and position parameters from the first style definition.

Use instead background-image:

a.vote_up, a.vote_down {
    display:inline-block;
    background-repeat:no-repeat;  //changed to no-repeat
    background-position:center;  
    height:30px;
    width:30px;
    margin-left:4px;
    text-indent:-900%;
}
                  // background-image to prevent overwrite 
a.vote_up {       //    of background-repeat & background-position
    background-image:url("images/uparrow.png"); 
}
a.vote_down {
    background-image:url("images/downarrow.png");
}

And it background-repeatshould be no-repeat.