css z obrazem tła bez powtarzania obrazu

Question

Mam kolumnę (pozwala założyć, że szerokość jest 40px) i tam mam kilka wierszy. Wysokość rzędów zależy od długości tekstu (jeśli tekst jest długi, oznacza to linię przerywania, a zatem wysokość się zwiększa).

Teraz chcę wyświetlić ikonę w każdym wierszu obok tekstu, aby pokazać użytkownikowi na przykład, że już ukończył coś na tej karcie. Próbowałem rozwiązać ten problem, używając tylko css. Więc jeśli użytkownik zakończy zakładkę, zmieniam css tego wiersza. Nie mogę jednak dodać do tego wiersza obrazu bez tego, że obraz jest powtarzany.

Używam tego kodu CSS:

padding: 0 8px; 
padding-top: 8px; 
padding-right: 8px; 
padding-bottom: 8px; 
padding-left: 8px; 
overflow: hidden; 
zoom: 1; 
text-align: left; 
font-size: 13px; 
font-family: "Trebuchet MS",Arial,Sans; 
line-height: 24px; 
color: black; 
border-bottom: solid 1px #BBB; 
background-color: white; 
background-image: url('images/checked.gif'); 
background-repeat-x: no-repeat; 
background-repeat-y: no-repeat; 

Czy ktoś wie jak to zrobić?

Answer 1

Zamiast

background-repeat-x: no-repeat; 
background-repeat-y: no-repeat; 

która nie jest poprawna, należy

background-repeat: no-repeat; 

Answer 2

To wszystko, czego potrzebujesz:

background-repeat: no-repeat; 

Answer 3

Spróbuj

padding:8px; 
overflow: hidden; 
zoom: 1; 
text-align: left; 
font-size: 13px; 
font-family: "Trebuchet MS",Arial,Sans; 
line-height: 24px; 
color: black; 
border-bottom: solid 1px #BBB; 
background:url('images/checked.gif') white no-repeat; 

To jest pełne css .. Dlaczego używasz padding:0 8px, a następnie zastępujesz go wypustkami? To jest to, czego potrzebujesz ...

Answer 4

body { 
    background: url(images/image_name.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Tutaj jest dobrym rozwiązaniem, aby uzyskać obraz do pokrycia pełnego obszaru aplikacji internetowej doskonale