CSS с фоновым изображением без повторения изображения

Question

У меня есть столбец (допустим, ширина 40px), и у меня есть несколько строк. Высота строк зависит от длины текста (если текст длинный, то есть линия разрыва и, следовательно, высота увеличивается).

Теперь я хочу отобразить значок в каждой строке рядом с текстом, чтобы показать пользователю, например, что он уже что-то выполнил на этой вкладке. Поэтому я пытался решить эту проблему, используя только CSS. Поэтому, если пользователь завершает вкладку, я изменяю CSS этой строки. Однако я не могу добавить в эту строку изображение, если оно не повторяется.

Я использую этот код 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;

Кто-нибудь знает, как это сделать?

Answer 1

вместо

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

что не правильно, используйте

background-repeat: no-repeat;

Answer 2

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

Вот хорошее решение, чтобы ваше изображение покрывало всю область веб-приложения. совершенно

Answer 3

Попробуйте это

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;

Это полный CSS .. Почему вы используете padding:0 8px, а затем переопределите его с отступами?Это то, что тебе нужно ...

Answer 4

Это все, что вам нужно:

background-repeat: no-repeat;