Как поместить изображение в качестве фона вместо цвета в радиальном градиенте? [дубликат] ⇐ CSS

[Anonymous]

Код: Выделить всё

.banner {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8rem;
text-align: center;
line-height: 2rem;
color: #40241E;
padding: 2rem;
margin: 15rem auto 0;
min-height: 33rem;
background: radial-gradient(circle at top, transparent 77px, rgb(242, 191, 145, 0.4) 15px);
}
.banner .headerLogo{
width: 11rem;
position: absolute;
top: -95px;
}
.banner .headerLogo:hover{
transform: scale(1.1);
transition: .27s ease-in-out;
}
.banner h1 {
font-weight: 700;
font-size: 5.5rem;
}
.banner p {
font-size: 2rem;
font-weight: 500;
}

Код: Выделить всё

[img]{logo} className=[/img]
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

У меня есть элемент div в форме прямоугольника, в верхней части которого вырезан прозрачный полукруг, что достигается с помощью свойства радиального градиента, но теперь я не могу поместить изображение в качестве фона этого div из-за этого свойства. Есть ли способ разместить изображение вместо цвета в качестве фона, сохранив при этом свойство радиального градиента?

Подробнее здесь: https://stackoverflow.com/questions/790 ... l-gradient