Ary Ary - 15 days ago 8
CSS Question

Can I put radial-gradient into a image

I have this html code

<div class="right">
<div class="img">
<img ng-src="{{ticket.thumbnail}}">
</div>
</div>


And this scss

.right{
width: 25vw;
display: flex;
justify-content: center;
align-items: center;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;

background-image: radial-gradient(circle at 0% 0%, $mainBackground 9px, transparent 9px),
radial-gradient(circle at 0% 100%, $mainBackground 9px, $footer 9px);
.img{
overflow: hidden;
display: flex;
justify-content: center;

img{
height: 16.2vh;
}
}

}


The result of this is:

enter image description here

I want to have both borders like the right one. I know to do it with a solid background, but not with an image. The one I know to do is:

enter image description here

Thanks a million

EDITED

I tried to put the image like background of .right class:

<div class="right" ng-style="{'background-image' : 'radial-gradient(circle at 0% 0%, #150357 9px, transparent 9px),
radial-gradient(circle at 0% 100%, #150357 9px, url({{ticket.thumbnail}}) 9px)'}">

</div>


The problem is that it doesn't show nothing:

enter image description here

The html output is:

enter image description here

I thinK that if I could show the image in the background place, it should be work like a want.

Ary Ary
Answer

No I can't do it in an image. I should edit first