Set the background image to right side of column header of Table

[Rxyz]

how to put the background image at the right side corner of the column header in the table?

the background image is displayed for the whole column header. Not sure what's wrong.

table.single-line-table {
font: 11px arial, helvetica, sans-serif;
border-collapse: collapse;
border: solid 2px black;
}
table.single-line-table td, .single-line-table th {
border: solid 1px black;
padding: 2px 5px;
}
table.single-line-table th {
text-align: left;
font-weight: bold;
}
table.single-line-table thead tr {
background-color: #9c9;
}
table.single-line-table th.sorted {
background-color: orange;
}
table.single-line-table th a, th a:visited {
color: black;
}
table.single-line-table th a:hover {
text-decoration: underline;
color: black;
}
table.single-line-table th.sorted a, th.sortable a {
background-position: right;
display: block;
width: 100%;
}
table.single-line-table th.sortable a {
background-image: url(../img/arrow_off.png);
}
table.single-line-table th.order1 a {
background-image: url(../img/arrow_down.png);
}
table.single-line-table th.order2 a {
background-image: url(../img/arrow_up.png);
}

table.single-line-table tr.even {
background-color: #ccb;
}
table.single-line-table tr.odd {
background-color: #eec;
}
tr.tableRowEven{
background-color: #9c9;
}

thanks.

[Rxyz]

Got this working by giving
background-repeat: no-repeat;

in

table.single-line-table th.sorted a, th.sortable a {
background-position: right;
background-repeat: no-repeat;
display: block;
width: 100%;
}