CODEWITHSUNDEEP
csslinear-gradients
Maroš Beťko
Maroš Beťko

Reputation: 2329

Apply background gradient only over no-repeat background image

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" />

Upvotes: 0

Views: 116

Answers (1)

Maroš Beťko
Maroš Beťko

Reputation: 2329

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>

Upvotes: 1

Related Questions