Не выходит накласть картинку на градиент CSS

Question

Есть градиент, и сверху градиента нужно расположить картинку, раздельно работает, вместе что бы картинка была выше градиента не выходит абсолютно никак, как это решить?

.notebook{
    
    background: rgb(251,76,31);
    background: linear-gradient(90deg, rgba(251,76,31,1) 0%, rgba(254,121,61,1) 35%, rgba(11,127,171,1) 100%);

background:  url(/img/icon/promo.png) no-repeat top -100px right -250px / 830px;

}

Answer 1

Просто накладывается одно на другое через запятую в свойсве background:

.block {
  width: 300px;
  height: 300px;
  padding: 20px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/[email protected]?v=73d79a89bded) center, linear-gradient(45deg, #555, #fff);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: sans-serif;
}

<div class="block">
  Very interesting text
</div>

БЛОГ НА HUSL

Не выходит накласть картинку на градиент CSS

Ответы (1 шт):