CSS + HTML | background-image проблема с делением картинки?

Question

[HTMLshik]

Код css
.btn{
color: #9cf;
font-family: montserrat;
font-size: 20px;
outline: none;
background-image:url(1.png);
border: 1px solid #9cf;
border-radius: 25px;
position: fixed;

}
Должно быть на фоне: 1 сердечко в центре , но вместо этого на всей кнопке сердечки..

Answer 1

[Ankhena]

Для этого нужны свойства background-repeat со значением no-repeat и background-position со значением center

Comments

[HTMLshik]

Проблема решена, и ещё одна добавлена XD
Может стоить изменить расширение картинки, оставить положение сердечка таким же но всё остальное белым закрасить? (Я про этот тёмный фон и вырезку белую..)

UPD: Починил
background-color: white

[Ankhena]

HTMLshik, не поняла, зачем менять расширение картинки, если вам нужен белый фон у кнопки.
Для таких иконок обычно делают svg.

[Валерий]

HTMLshik, background-color:#ffffff;

[HTMLshik]

Ankhena, Уже исправил
background-color: white

[HTMLshik]

Валерий, Уже исправил.
backgroud-color:white
p.s не использую HEX коды цветов без необходимости, если не важны тона, можно обойтись и английским языком.

[Ankhena]

HTMLshik, это уже вопросы вашего личного вкуса или кодстайла компании.