Как добавить фон картинки на кнопку?

Question

[Mayaya]

Как добавить фон картинки на кнопке? Я никогда не занималась этим, в интернете информацию не нашла, помогите, может что в button-chat.css нужно написать, кнопка не имеет вообще никакого внешнего вида.
Ещё нужно чтобы когда наводишь на кнопку, она менялась на другой фон.

<span class="button-chat" onclick="CHAT.chat.send();">&nbsp; ENTER &nbsp;&nbsp;</span>

Comments

[Фёдор]

Повесьте на кнопку :hover и задайте цвет при наведении

[Rerurk]

Вообще для кнопок есть отдельные теги buttion, input type="buttion"

[Mayaya]

Фёдор, Спасибо за ответ, Фёдор! Мне необходимо установить не цвет а именно фон картинкой, и если можно, можете пожалуйста написать полной строчкой, совершенно ничего не понимаю в этом.

[Mayaya]

Rerurk, Кнопка отвечает за отправку сообщения, и она почему то выглядит в коде именно так

[Rerurk]

Mayaya, тут

[Mayaya]

Rerurk, Не помогло(
Кнопка так и осталась без фона

[Rerurk]

Mayaya, URL правильно добавили.?

[Mayaya]

Rerurk, Да, указано всё верно, но к сожалению кнопка так же не имеет фона

[Mayaya]

Rerurk,

.mainNew .f-bu-success {
    background-color: #859900;
    background-image: -moz-linear-gradient(#b1cc00, #859900);
    background-image: -ms-linear-gradient(#b1cc00, #859900);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1cc00), color-stop(100%, #859900));
    background-image: -webkit-linear-gradient(#b1cc00, #859900);
    background-image: -o-linear-gradient(#b1cc00, #859900);
    background-image: linear-gradient(#b1cc00, #859900)
}
.mainNew .f-bu-success:hover {
    background-color: #6f8000;
    background-image: -moz-linear-gradient(#9bb300, #6f8000);
    background-image: -ms-linear-gradient(#9bb300, #6f8000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9bb300), color-stop(100%, #6f8000));
    background-image: -webkit-linear-gradient(#9bb300, #6f8000);
    background-image: -o-linear-gradient(#9bb300, #6f8000);
    background-image: linear-gradient(#9bb300, #6f8000)
}
.mainNew .f-bu-warning {
    background-color: #dc322f;
    background-image: -moz-linear-gradient(#eb8886, #dc322f);
    background-image: -ms-linear-gradient(#eb8886, #dc322f);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eb8886), color-stop(100%, #dc322f));
    background-image: -webkit-linear-gradient(#eb8886, #dc322f);
    background-image: -o-linear-gradient(#eb8886, #dc322f);
    background-image: linear-gradient(#eb8886, #dc322f)

Вот что находилось ранее в css, кнопка имела цвет и при наведении меняла её, но теперь необходимо за место цвета указать картинку

Answer 1

[Всеволод html]

Почитайте про hover.
CSS:

.button-chat {
  background-image: url(img/file1.png);
}
.button-chat:hover {
  background-image: url(img/file2.png);
}