仅在无重复背景图像上应用背景渐变

Question

I'm trying to insert a background image to the top-right corner of my element and fade it with a gradient. The problem is that gradient is stretched through whole element and not only over the no-repeat image.

 .bg { /* manually set size for demostration purposes */ width: 800px; height: 1600px; background-repeat: no-repeat; background-position-x: right; background-color: rgba(66, 66, 66, 1); background-image: linear-gradient(45deg, rgba(66, 66, 66, 1), rgba(66, 66, 66, 0.8)), url("https://img.scryfall.com/cards/art_crop/front/b/d/bd8fa327-dd41-4737-8f19-2cf5eb1f7cdd.jpg?1562933099"); }

 <div class="bg" />

Answer 1

Thanks to this answer I was able to solve my question. Here is finished snippet.

 .bg { /* manually set size for demostration purposes */ width: 800px; height: 600px; position: relative; background-color: #424242; } .image { position: absolute; top: 0; right: 0; width: 75%; } .image:after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: inline-block; background-image: radial-gradient(ellipse at top 35% right 35%, rgba(66,66,66,0.8) 0%, #424242 70%); } .image img { width: 100%; }

 <div class="bg"> <div class="image"> <img src="https://img.scryfall.com/cards/art_crop/front/b/d/bd8fa327-dd41-4737-8f19-2cf5eb1f7cdd.jpg?1562933099" /> </div> </div>