# How to add a gradient on top of a background image in PG?

**URL:** <https://forum.pinegrow.com/t/how-to-add-a-gradient-on-top-of-a-background-image-in-pg/3407>\
**Category:** Beginners\
**Tags:** css\
**Created:** [October 3, 2019, 12:53pm UTC](https://forum.pinegrow.com/t/how-to-add-a-gradient-on-top-of-a-background-image-in-pg/3407 "2019-10-03T12:53:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [October 3, 2019, 12:53pm UTC](https://forum.pinegrow.com/t/how-to-add-a-gradient-on-top-of-a-background-image-in-pg/3407/1 "2019-10-03T12:53:01Z")

</div>

I have a div with a background image and I want to use a gradient on top of this.  
In PG it seems I can either select image or gradient but not both. With a background image already selected if I set some gradient the image is simply deleted and substituted with the gradient css code.  
Manually it should be like this:

```
 #show_bg_2 {
 
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('images/background.jpg');
 width: 80%;
height: 400px;
background-size: cover;
}

```

Thanks

---

<div class="post-metadata">

**Author:** ![Pervasive](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pervasive/32/2251_2.png) [@Pervasive](https://forum.pinegrow.com/u/Pervasive)\
**Post date:** [October 3, 2019, 5:25pm UTC](https://forum.pinegrow.com/t/how-to-add-a-gradient-on-top-of-a-background-image-in-pg/3407/2 "2019-10-03T17:25:28Z")

</div>

I was a little curious myself, so I did what I usually do… check out:

> **[Add Background Image Gradient Overlay with CSS | Codeconvey](https://codeconvey.com/background-image-gradient-overlay/)**
>
> If you wanted to add a semi-opaque or semi-transparent color gradient that goes on top of the background image, You might need to overlay another div (or use the position absolutely element). However, the simplest way to do...

and see if that helps any.

---

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [October 3, 2019, 6:40pm UTC](https://forum.pinegrow.com/t/how-to-add-a-gradient-on-top-of-a-background-image-in-pg/3407/3 "2019-10-03T18:40:36Z")

</div>

Thanks, I know how to do this manually; writing the css but my question was how to get this done with the PG visual tools in the style panel. Was hoping to do this with a few clicks.  
Thanks

---

<div class="post-metadata">

**Author:** ![jtkay](https://avatars.discourse-cdn.com/v4/letter/j/9f8e36/32.png) [@jtkay](https://forum.pinegrow.com/u/jtkay)\
**Post date:** [May 29, 2020, 2:16am UTC](https://forum.pinegrow.com/t/how-to-add-a-gradient-on-top-of-a-background-image-in-pg/3407/4 "2020-05-29T02:16:39Z")

</div>

Did you find an answer?

---

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [May 31, 2020, 7:14am UTC](https://forum.pinegrow.com/t/how-to-add-a-gradient-on-top-of-a-background-image-in-pg/3407/5 "2020-05-31T07:14:29Z")

</div>

No, I used the above css line.

---

<div class="post-metadata">

**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\
**Post date:** [June 22, 2020, 10:02pm UTC](https://forum.pinegrow.com/t/how-to-add-a-gradient-on-top-of-a-background-image-in-pg/3407/6 "2020-06-22T22:02:39Z")

</div>

why not use

`background-blend-mode: overlay ;`

in CSS?

[https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode)