Картинка растягивается по ширине при hover. Как исправить?

Question

[WebN00b]

При наведении необходимо, чтобы было так

А получается просто зелёный фон и картинка растягивается вот так

Вот код, что имею (SASS)

&-item
transition: 300ms
background-color: #000
min-height: 25vh
background-size: cover
background-position: center
text-align: center
position: relative
&::before
content: ''
position: absolute
top: 0
right: 0
left: 0
bottom: 0
background-color: $green
background-image: url(../img/icons/main-4-bicke.png)
text-align: center
background-position: center
background-size: cover
opacity: 0
transition: opacity .5s ease

&:hover
&::before
opacity: .65
картинка на всяк случай

Прошу прощение за оформление вопроса, недавно только начал пользоваться тостером

Comments

[Ankhena]

Выложите код с проблемой в песочницу jsfiddle.net или codepen.io

Answer 1

[Ankhena]

У вас стоит background-size: cover.
Нужно изменить на то, что вам нужно. Вероятно в px или % или вообще без указания bg size

Comments

[WebN00b]

если ставить размер в px или % появляется много изображений

[Ankhena]

WebN00b, много изображений это background-repeat. Вам нужно задать no-repeat

https://webref.ru/css/background-repeat

[Одиночка Айс]

Почему бы не написать проще?

background: $green url(../img/icons/main-4-bicke.png) no-repeat center center;
background-size: 20px auto;

background-size отдельно, потому что не всегда нужно указывать его, да и вообще, для наглядности

[Ankhena]

Одиночка Айс, краткая запись не всегда доводит до добра, например, при переопределениях, поэтому нельзя ее советовать без оговорок.

[Одиночка Айс]

Ankhena, ну, да, при условии, что элемент потом не будет менять свои св-ва, при наведении, например. Забыл упомянуть)